CSS Flexbox如何实现内容等高布局_align-items stretch撑满高度-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-30 17:32:57

原创

253人浏览过

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/789">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d94942638283.png" alt="讯飞开放平台">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/789">讯飞开放平台</a>
                            <p>科大讯飞推出的以语音交互技术为核心的AI开放平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="讯飞开放平台">
                                <span>152</span>
                            </div>
                        </div>
                        <a href="/ai/789" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="讯飞开放平台">
                        </a>
                    </div>
                
    <p>可能有多行文字，导致这个区域自然更高。</p>
    <p>但由于 flex 默认行为，左侧也会被拉高到相同高度。</p>
  </div>
</div>

登录后复制