0

Так и не придумал, как это решить. Имею блок фиксированной высоты 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>

2
  • Нажмите на кнопку и отредактируйте ваш вопрос, вставив в него минимальный воспроизводимый код 2 апр 2022 в 23:23
  • @Shake, чтобы сейчас добавить CSS код, нажмите кнопку "Править", чтобы изменить ваш вопрос, и ниже, где будет предпросмотр вопроса, выберите "редактировать код" (скрин). А чтобы в дальнейшем самостоятельно создавать такой сниппет кода, используйте кнопку Фрагмент кода в редакторе вопроса (скрин)
    – De.Minov
    3 апр 2022 в 3:48

1 ответ 1

0

Чтобы расположить кнопку в конце родительского блока, вы можете использовать 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.