带有 Flex Box 的方块

Question

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

Answer 1

鉴于您已经在父元素上设置了高度（并且父元素是方形的），您只需要为子 flexbox 项目设置 50%.[=16= 的高度]

在这样做时，50% 的 flex-basis (shorthand) 值与 50% 的高度相结合将产生完美的正方形 flexbox 项目，因为父项是正方形。

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

Square Blocks with Flex Box