我正在尝试通过 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会将其自身与盒子的底部对齐。
然而，这并没有按预期工作，并且底部元素出现在中心元素.
还有其他办法可以解决这个问题吗？或者我可能错过了一些愚蠢的事情？
更新1：
将整个“包装器”的“中间”div 垂直居中。
.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：
将“中间”div 垂直居中在“包装器”减去“底部”的可用空间内。
.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 个元素。
Note:当 Flex 项目中有多行文本时，中间的 div 可能不会绝对位于中间。
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
