CSS:不设定高度的情况,如何让flex下的两个元素的高度一致

方法 1：使用 align-items: stretch（默认行为）

flex 容器的默认行为是 align-items: stretch，这意味着子元素的高度会自动拉伸到与容器高度一致。如果容器没有固定高度，子元素会以最高的子元素为准。

css

.container {
    display: flex; /* 启用 flex 布局 */
    align-items: stretch; /* 默认值，子元素高度会拉伸到一致 */
}

.item {
    /* 不需要设置高度 */
}

html

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2，这段内容更长，会撑开高度</div>
</div>

方法 2：使用 flex-grow 或 flex: 1

如果希望两个子元素的高度一致，并且宽度平分容器空间，可以使用 flex: 1 或 flex-grow: 1。

css

.container {
    display: flex;
}

.item {
    flex: 1; /* 让子元素平分空间，高度会自动一致 */
}

html

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2，这段内容更长，会撑开高度</div>
</div>

方法 3：使用 align-self: stretch

如果只想让某个子元素的高度与其他子元素一致，可以使用 align-self: stretch。

css

.container {
    display: flex;
}

.item {
    align-self: stretch; /* 让当前子元素高度与其他子元素一致 */
}

方法 4：使用 min-height 和 height: 100%

如果子元素的内容高度不一致，但仍然希望它们的高度一致，可以结合 min-height 和 height: 100%。

css

.container {
    display: flex;
}

.item {
    min-height: 100%; /* 确保高度一致 */
}

总结

• 默认行为：flex 容器的 align-items: stretch 会让子元素高度一致。

• 灵活布局：使用 flex: 1 可以让子元素平分空间，同时高度一致。

• 特殊情况：如果需要单独控制某个子元素的高度，可以使用 align-self: stretch。

无需显式设置高度，flex 布局会自动处理子元素的高度对齐问题。