底部具有高度的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屋！