如何让 flexbox 将中心固定和底部固定在一起? [英] How do I get a flexbox to have a center fixed and a bottom fixed children together?

问题描述

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

<代码>|||||中心固定元件 ||||底部固定元件 |

这是我粗略的 flexbox CSS.

.wrapper{显示:弹性；对齐内容:中心；弹性方向:列；}.底部元素{align-self:flex-end;}

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

然而，这并没有按预期工作，并且 bottom element 出现在 center element 之后.

还有什么办法可以解决这个问题?还是我可能错过的愚蠢的东西?

解决方案

更新 1:

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

.wrapper {高度:100px；宽度:100px；显示:弹性；弹性方向:列；对齐内容:居中；位置:相对；边框:1px纯红色；}.中间，.底部 {背景:水色；}.底部 {位置:绝对；底部:0；左:0；右:0；}

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

更新 2:

在'wrapper'减去'bottom'的可用空间内垂直居中'middle' div.

.wrapper {高度:100px；宽度:100px；显示:弹性；弹性方向:列；边框:1px纯红色；}.中间，.底部 {背景:水色；边距顶部:自动；}

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

上一个答案:

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

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

.wrapper {高度:100px；宽度:100px；显示:弹性；弹性方向:列；对齐内容:间隔；边框:1px纯红色；}.wrapper:before {内容:0A0"；}.wrapper>div {背景:水色；}

<div>中间</div><div>底部</div>

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

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

This is my rough flexbox CSS.

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

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?

解决方案

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>

Update 2:

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>

Previous answer:

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.

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: "0A0";
}

.wrapper>div {
  background: aqua;
}

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

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