Позиционирование кнопки вниз блока

Question

Так и не придумал, как это решить. Имею блок фиксированной высоты section-2__inner. Внутри блок с текстом и кнопка. Родителю задан display: flex и flex-direction: column. При указания justify-content: flex-end родителю они оба отправляются вниз, при задании этого свойства кнопке ничего не происходит. Как мне опустить вниз только внопку этим способом?

.section-2__inner {
    display: flex;
    padding-top: 169px;
    height: 1000px; 
    flex-direction: column;
    align-items: center;
}
.classes-text {
    text-align: center;
}
.section-2__btn {
    justify-content: flex-end;
    padding: 16px 32px;
    background: none;
    border: 1px solid #F5443B;
    border-radius: 6px;
    color: #F5443B;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.5s;
}

            <section class="section-2">
                <div class="section-2__inner">
                    <div class="classes-text">
                        <h1 class="classes-text__title title">
                            What Do You Want to Learn?
                        </h1>
                        <p class="classes-text__desc desc">
                            Choose the right class as you need. Then enjoy studying.
                        </p>
                    </div>
                    <button class="section-2__btn" type="button" name="All__Classes">Show All Classes</button>
                </div>
            </section>

Answer 1

Чтобы расположить кнопку в конце родительского блока, вы можете использовать margin-top: auto; для самой кнопки:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 250px;
  height: 170px;
  border: 1px solid red;
}

.parent p {
  margin: 0;
}

.parent button {
  margin-top: auto;
}

<div class="parent">
  <p>Текст сверху</p>
  <button>Кнопка снизу</button>
</div>

margin-top: auto будет создавать отступ между ближайшим блоком и блоком из которого вызвано правило, до тех пор, пока "не упрётся в границу" родительского блока.
Это значение будет динамическим и если родительский будет не достаточного размера, чтобы margin-top был больше 0, то он будет 0. Но если нужен минимальный отступ, то вы можете задать его ближайшему блоку записью margin-bottom.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 250px;
  min-height: 2em;
  height: 170px;
  max-height: 170px;
  border: 1px solid red;
  overflow: hidden;
  resize: vertical;
}

.parent p {
  background-color: rgba(255,0,0,.15);
  margin: 0;
  margin-bottom: 20px;
}

.parent button {
  margin-top: auto;
}

<div class="parent">
  <p>Текст сверху</p>
  <button>Кнопка снизу</button>
</div>

Тоже самое можно сделать и сменив margin-top на margin-bottom:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 250px;
  height: 170px;
  border: 1px solid red;
}

.parent p {
  margin: 0;
  margin-bottom: auto;
}

<div class="parent">
  <p>Текст сверху</p>
  <button>Кнопка снизу</button>
</div>

Аналогично данный рецепт можно использовать и для flex-direction: row.

.parent {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  border: 1px solid red;
}

.parent p {
  margin: 0;
}

.parent button {
  margin-left: auto;
}

<div class="parent">
  <p>Текст сверху</p>
  <button>Кнопка снизу</button>
</div>

БЛОГ НА HUSL

Позиционирование кнопки вниз блока

Ответы (1 шт):