CSS Flexbox如何实现内容等高布局_align-items stretch撑满高度

新闻中心 NEWS CENTER

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

CSS Flexbox如何实现内容等高布局_align-items stretch撑满高度

2025-11-30

浏览次数：次

返回列表

Flexbox中子元素等高由align-items:stretch实现，未设固定高度时子项自动拉伸至相同高度；若设置height、min-height或更改align-items则失效，需保持默认行为并合理嵌套结构以确保布局效果。

css flexbox如何实现内容等高布局_align-items stretch撑满高度

在使用 CSS Flexbox 布局时，实现子元素等高（即所有子项高度一致并自动撑满容器）是一个常见需求。Flexbox 提供了简单而强大的方式来达成这一效果，关键在于 align-items 属性的默认行为。

align-items: stretch 是实现等高的核心

Flex 容器中的子元素（flex items）默认会受到 align-items: stretch 的影响。这意味着：当子元素没有设置固定高度、或未被其他属性限制高度时，它们会自动拉伸以填满容器在交叉轴（cross axis）上的最大高度。

例如：

假设你有一个 flex 容器包含两个子块，一个内容多，一个内容少。只要未显式设置 height 或 min-height，并且 align-items 未被修改，较短的那个块会自动拉高到与较高的块一致。

示例代码：

<div style="display: flex; border: 1px solid #ccc;">
  <div style="flex: 1; background: #f0f0f0; padding: 16px;">
    <p>左侧内容较少</p>
  </div>
  <div style="flex: 1; background: #e0e0e0; padding: 16px;">
    <p>右侧内容较多</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1100">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680092492385.png" alt="来画数字人|直播|">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1100">来画数字人|直播|</a>
                            <p>来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="来画数字人|直播|">
                                <span>57</span>
                            </div>
                        </div>
                        <a href="/ai/1100" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="来画数字人|直播|">
                        </a>
                    </div>
                
    <p>可能有多行文字，导致这个区域自然更高。</p>
    <p>但由于 flex 默认行为，左侧也会被拉高到相同高度。</p>
  </div>
</div>