带弹性盒的方块

Posted 2023-03-07

【中文标题】带弹性盒的方块

【英文标题】：Square Blocks with Flex Box

【发布时间】：2015-05-30 13:04:11

【问题描述】：

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

【参考方案1】：

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

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

Updated Example

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

【讨论】：

这在一定程度上确实有效。但是现在这给了li 一个固定的高度。所以它不会根据内容增长/缩小。这里的主要目标是能够让给定ul 中的每个li 取其中最高的li 的高度。正如我所提到的，这似乎只发生在同一行中的盒子上。

@komplexb 但是如果所有的li元素都取最高的li的高度，那么如果有多行，li元素就不会是正方形的。

是的，没错。也有人插话Twitter，看来您的解决方案是我在不添加 JS 的情况下能得到的最接近的解决方案。谢谢。