使用CSS flexbox,我如何在不使用css height
属性的情况下,同时垂直居中一行中所有div的内容,同时保持所有div的高度相同?
HTML
<!DOCTYPE html>
<html>
<body>
<div class="Grid">
<div class="Grid-cell">
1<br>
1<br>
1<br>
1<br>
</div>
<div class="Grid-cell">2</div>
<div class="Grid-cell">
3<br>
3<br>
</div>
</div>
</body>
</html>
CSS:
.Grid {
display: flex;
justify-content: center;
align-items: center;
}
.Grid-cell {
flex: 1;
text-align: center;
}
4条答案
按热度按时间hvvq6cgz1#
pvabu6sv2#
lstz6jyr3#
如果在子对象上设置
flex: 1
,它将拉伸以填充空间。然后可以在子容器上执行
align-items: center
。pgky5nke4#
Flexbox没有理由这样做。table/table-cell属性已经能够做到这一点很长时间了:
http://cssdeck.com/labs/qsirepkh
这是Flexbox的外观:
http://codepen.io/cimmanon/pen/BfDAk