底部具有高度的Flexbox中所有具有相同高度的div [英] all divs with same height in a flexbox with at the bottom
问题描述
我有以下html可以用Bootstrap 4构建网格.
< link href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel ="stylesheet"完整性="sha384-ggOyR0iXCbMQv3Xipma34MD + dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin =匿名"< div class ="row">< div class ="col-sm-12 col-md-3">< div class ="row">< div class ="col-lg-12">这是可能的不同高度</div></div>< div class ="row align-items-end">< div class ="col-lg-12 date">应始终位于最底端(例如第四个日期)</div></div></div>< div class ="col-sm-12 col-md-3">< div class ="row">< div class ="col-lg-12">这是可能的不同高度</div></div>< div class ="row align-items-end">< div class ="col-lg-12 date">应始终位于最底端(例如第四个日期)</div></div></div>< div class ="col-sm-12 col-md-3">< div class ="row">< div class ="col-lg-12">这是可能的不同高度这是可能的不同高度这是可能的不同高度</div></div>< div class ="row align-items-end">< div class ="col-lg-12 date">应始终位于最底端(如第四个日期)</div></div></div></div>
我希望日期始终位于第二行的底部.也许图片更好地说明了问题.前三个日期与Flexbox底部的第四个日期不在同一行:
无法平等地对齐单独 flexbox父级子级中子级中的内容.但是,您可以使用 d-flex
然后使用 mt-auto
( margin-top:auto
)将列也设置为flexbox容器,以推送日期列的底部.
< div class ="col-sm-12 col-md-3 d-flex flex-column">< div class ="row">< div class ="col-lg-12">这是可能的不同高度</div></div>< div class ="row mt-auto">< div class ="col-lg-12 date">日期</div></div></div>
演示: https://www.codeply.com/go/gLYW7liCfc >
另请参阅:引导4张卡-具有可变标题行的垂直对齐正文
I have the following html to build a grid with bootstrap 4.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-md-3">
<div class="row">
<div class="col-lg-12">
here are different heights possible
</div>
</div>
<div class="row align-items-end">
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="row">
<div class="col-lg-12">
here are different heights possible
</div>
</div>
<div class="row align-items-end">
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="row">
<div class="col-lg-12">
here are different heights possible
here are different heights possible
here are different heights possible
</div>
</div>
<div class="row align-items-end">
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
</div>
</div>
I want to have the date always at the bottom of the second row. Maybe the picture explains the problem better. The first three dates are not in a line with the fourth date at the bottom of the flexbox:
There is no way to equally align the content in children of separate flexbox parents. You can however make the columns also flexbox container using d-flex
and then mt-auto
(margin-top:auto
) to push the dates to the bottom of the columns.
<div class="col-sm-12 col-md-3 d-flex flex-column">
<div class="row">
<div class="col-lg-12">
here are different heights possible
</div>
</div>
<div class="row mt-auto">
<div class="col-lg-12 date">
date
</div>
</div>
</div>
Demo: https://www.codeply.com/go/gLYW7liCfc
Also see: bootstrap 4 cards - vertical alignment body with variable header line rows
这篇关于底部具有高度的Flexbox中所有具有相同高度的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!