Question

我试图通过flexbox获得以下类型的布局。

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

这是我粗糙的flexbox CSS。

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

背后的想法是wrapper内的任何内容都会居中对齐，而.bottom-element会将自身对齐到框的底部。

然而，这并没有按预期工作，底部元素紧跟在中心元素之后。

任何其他方式都可以解决这个问题？还是我可能错过的傻事？

Answer 1

我们的想法是使用CSS伪内容为顶部元素创建一个空占位符，然后使用flex-direction: column; + justify-content: space-between;垂直对齐所有3个元素。

＆＃13;

.wrapper {
    height: 100px;
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid red;
}
.wrapper:before {
    content: "\00A0";
}
.wrapper > div {
    background: aqua;
}

＆＃13;

<div class="wrapper">
    <div>middle</div>
    <div>bottom</div>
</div>

＆＃13;

请注意，当在flex项目中出现多行文本时，中间div可能不是绝对中间。

Answer 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>

如何让一个弹性盒固定中心并将底部固定的儿童放在一起？

2 个答案: