在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ flex-wrap容器中每行子元素高度如何一致?

flex-wrap容器中每行子元素高度如何一致?

<div class="flex-box">
   <div>a<br/>a<br/>a<br/><a class="more">more</a></div>
   <div>b<br/><a class="more">more</a></div>
   <div>c<br/>c<br/>c<br/>c<br/><a class="more">more</a></div>
   <div>d<br/>d<a class="more">more</a></div>
</div>
.flex-box{
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-box>div{
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    width: 50%;
}
flex-box a{
    position:absolute;
    bottom:0;
    left:0;
    color:red
}

使用flex做布局,想使flex-wrap容器中每行子元素高度一致,達到每行的more鏈接對齊目的,有什么好的方法實現(xiàn)呢?

回答
編輯回答
蔚藍色

.flex-box{

display: flex;
align-items:stretch;

}

2017年4月13日 06:12
編輯回答
短嘆

刪掉 height: 100%;

2017年3月18日 05:18
編輯回答
若相惜

刪掉 height: 100%;
相當于 在父組件啟用了默認的 align-items:stretch
相當于每一行的高度都是 height最大的那一個

2017年5月7日 20:07