如何在CSS中实现多列等高布局_使用Flexbox align-items stretch统一列高

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中实现多列等高布局_使用Flexbox align-items stretch统一列高

2025-11-26

浏览次数：次

返回列表

使用Flexbox的align-items: stretch可实现多列等高布局，父容器设display: flex，子列不设固定高度即可自动拉伸，两列内容无论长短均保持相同高度，适用于卡片、侧边栏等场景。

如何在css中实现多列等高布局_使用flexbox align-items stretch统一列高

在CSS布局中，让多个列具有相同的高度是一个常见需求，尤其是在创建卡片、产品列表或侧边栏与主内容并排的布局时。使用Flexbox的 align-items: stretch 特性，可以轻松实现多列等高布局，无需J*aScript或固定高度。

基本原理：align-items 与 stretch

Flex容器默认的 align-items 属性值是 stretch，这意味着子元素（flex项目）在交叉轴上会自动拉伸以填满容器的最大高度。只要子元素没有设置固定高度或 align-self: flex-start 等覆盖行为，它们就会自动等高。

关键点：

父容器设置 display: flex
确保子列未设置 height 或 min-height 阻止拉伸
默认行为即为等高，无需额外设置 align-items: stretch（除非被覆盖）

实际代码示例

以下是一个两列等高布局的简单实现：

.container {
  display: flex;
  gap: 16px; /* 列间距，推荐使用gap而非margin */
}
<p>.column {
flex: 1; /<em> 均分空间 </em>/
background-color: #f0f8ff;
padding: 20px;
border: 1px solid #ddd;
}

HTML结构：

<div class="container">
  <div class="column">
    <h3>短内容</h3>
    <p>这一列内容较少。</p>
  </div>
  <div class="column">
    <h3>长内容</h3>
    <p>这一列有很多文字……</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/892">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679988742423.png" alt="语鲸">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/892">语鲸</a>
                            <p>AI智能阅读辅助工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="语鲸">
                                <span>314</span>
                            </div>
                        </div>
                        <a href="/ai/892" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="语鲸">
                        </a>
                    </div>
                
    <p>会撑高整个容器。</p>
    <p>另一段。</p>
  </div>
</div>

结果：两列高度相同，较短的一列也会被拉伸到与较高的一列一致。