Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы у flexbox были фиксированные дети в центре и снизу вместе?

Как мне сделать так, чтобы у flexbox были фиксированные дети в центре и снизу вместе?

#html #css #flexbox

Вопрос:

Я пытаюсь получить макет следующего вида с помощью flexbox.

 |                      |
|                      |
| CENTER FIXED ELEMENT |
|                      |
| BOTTOM FIXED ELEMENT |

Это мой грубый CSS flexbox.

 .wrapper{
    display:flex;
    justify-content:center;
    flex-direction:column;
}
.bottom-element {
    align-self:flex-end;
}

Идея заключается в том, что все, что находится внутри wrapper , будет выровнено по центру и выровняется .bottom-element по нижней части коробки.

Однако это работает не так, как ожидалось, и нижний элемент появляется сразу после центрального элемента.

Есть ли другой способ решить эту проблему? или что-то глупое, что я мог пропустить?

Ответ №1:

Обновление 1:

Центрируйте «середину» по вертикали всей «обертки».

 .wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border: 1px solid red;
}

.middle,
.bottom {
  background: aqua;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
} 
 <div class="wrapper">
  <div class="middle">middle</div>
  <div class="bottom">bottom</div>
</div>

Обновление 2:

Центрируйте «середину» по вертикали в пределах доступного пространства «обертки» минус «дно».

 .wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.middle,
.bottom {
  background: aqua;
  margin-top: auto;
} 
 <div class="wrapper">
  <div class="middle">middle</div>
  <div class="bottom">bottom</div>
</div>

Предыдущий ответ:

Идея заключается в создании пустого заполнителя для верхнего элемента с псевдоконтентом CSS, а затем просто используйте flex-direction: column; justify-content: space-between; , чтобы выровнять все 3 элемента по вертикали.

Примечание: средний div может быть не совсем посередине, когда речь заходит о нескольких строках текста в элементах flex.

 .wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid red;
}

.wrapper:before {
  content: "0A0";
}

.wrapper>div {
  background: aqua;
} 
 <div class="wrapper">
  <div>middle</div>
  <div>bottom</div>
</div>

Ответ №2:

 .container {
  display: flex;
  flex-direction: column;
  background-color: red;
  height: 10em; 
}
.third {
  margin-top: auto;
}
.first{
  margin-top: auto;
} 
 <div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>
Метки: ,