如何使单独的 Flex 容器中大小不等的标题具有相同的高度？

Flex 项目的等高子项

问题：
您希望所有 .block div 的高度相等，并且 .block div 的高度相等。底部 div 绝对定位到底部。这是可行的，但是当 h2 标题太长并且达到 2 行时，您希望该行的所有 h2 标题具有相同的高度。

解决方案：

不可能一般使用 Flexbox 或 CSS 来实现这一点。

Flexbox 的默认行为是将 Flex 项目拉伸到横轴的整个高度，这称为“Flex 等高”专栏”。但是，这仅适用于 Flex 容器的子级，不适用于不同容器中的元素。

在这种情况下，h2 标题位于不同的容器中，因此等高功能不适用。此外，对 Flex 项目应用高度会覆盖等高设置。

附加说明：

• 等高列仅适用于单个 Flex 行。
• align-self属性可以覆盖align-items并打破等高功能。
• 等高列不适用于多行 Flex 容器。
• 当 Flex 方向为列时，等高适用于宽度。

以上是如何使单独的 Flex 容器中大小不等的标题具有相同的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！