带弹性盒的方块答案

【问题标题】：Square Blocks with Flex Box带弹性盒的方块
【发布时间】：2023-04-09 21:33:01
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

这样做时，50% 的 flex-basis（简写）值与 50% 的高度相结合将产生完美的方形 flexbox 项目，因为父项是方形的。

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

【讨论】：

这在一定程度上确实有效。但是现在这给了li 一个固定的高度。所以它不会根据内容增长/缩小。这里的主要目标是能够让给定ul 中的每个li 取其中最高的li 的高度。正如我所提到的，这似乎只发生在同一行中的盒子上。
@komplexb 但是如果所有的li元素都取最高的li的高度，那么如果有多行，li元素就不会是正方形的。
是的，没错。也有人插话Twitter，看来您的解决方案是我在不添加 JS 的情况下能得到的最接近的解决方案。谢谢。