css - 带有 Flex Box 的方 block

Question

有没有办法使用 display: flex; 和 flex-wrap: wrap; 使所有盒子的高度(和宽度)等于最大盒子的高度(和宽度) >。它似乎只对同一行的人有效。这支笔更能说明问题:http://codepen.io/komplexb/pen/gbqgXq

Answer 1

鉴于您已经在父元素上设置了高度(并且父元素是方形的)，您只需要为子 flexbox 元素设置高度 50% .

这样做，flex-basis (速记)50% 的值结合高度 50%将产生完美的方形 flexbox 元素，因为父项是方形的。

Updated Example

li {
  flex: 0 0 50%;
  height: 50%;
  color: white;
  text-align: center;
}