我如何获得一个flexbox来将一个中心固定的孩子和一个底部固定的孩子在一起? [英] How do I get a flexbox to have a center fixed and a bottom fixed children together?

问题描述

我正在尝试通过flexbox获得以下布局.

I am trying to get a layout of the following kind via flexbox.

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

这是我粗糙的flexbox CSS.

This is my rough flexbox CSS.

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

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

The idea behind is that anything inside wrapper would get center aligned and .bottom-element would align itself to the bottom of the box.

但是，此操作无法正常工作，并且底部元素出现在中心元素之后.

This however doesn't work as expected and bottom element appears right after the center element.

还有其他方法可以解决吗?还是我可能错过的愚蠢的东西?

Any other way this could be solved? or a silly something I might have missed?

推荐答案

更新1:

将"div"垂直居中于整个包装器"的中心.

Update 1:

Center 'middle' div vertically of the whole 'wrapper'.

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

在包装器"减去底部"的可用空间内垂直将中间" div居中.

Center 'middle' div vertically within the available space of 'wrapper' minus 'bottom'.

.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个元素垂直对齐.

The idea is creating an empty placeholder for the top element with CSS pseudo content, and then just use flex-direction: column; + justify-content: space-between; to align all the 3 elements vertically.

注意:当在flex项目中出现多行文本时，中间div可能不会绝对位于中间.

Note: the middle div might not be absolutely in the middle when comes to multiple lines of text in the flex items.

.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;
}

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

这篇关于我如何获得一个flexbox来将一个中心固定的孩子和一个底部固定的孩子在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！