国际访客建议访问 Primers 编程伙伴 国际服 以获得更好的体验。 快速访问 HTML 样式 弹性布局

# CSS 的弹性布局

在此之前，我们写的页面上元素是按照先后顺序排列的，块元素总是占据一行，不受我们控制。 例如之前 语义化 章节中的示例代码中， aside 块作为侧边栏，却并没有显示在侧边，而是单独占据一行。

本节将学习 CSS 中最常用的布局方式——弹性布局，它可以方便地控制容器内项目的排列、对齐和分布方式。

通过将一个元素样式的 display 属性设为 flex，可以将该元素设为弹性布局的 容器， 容器的直接子元素将不再占据一行。

示例：

<div style="display:flex; height:100px;">
    <main style="background-color:#212121; color:cyan;">
        main
    </main>
    <aside style="background-color:#666; color:yellow;">
        aside
    </aside>
</div>

# 主轴和交叉轴

弹性容器中，默认水平方向为主轴，竖直方向为交叉轴，子元素在主轴上依次排列。

可以通过容器的 flex-direction 属性改变方向：

  • row - 水平方向为主轴，竖直方向为交叉轴

  • column - 竖直方向为主轴，水平方向为交叉轴

示例：

<div style="display:flex; flex-direction:column; height:100px;">
    <main style="background-color:#212121; color:cyan;">
        main
    </main>
    <aside style="background-color:#666; color:yellow;">
        aside
    </aside>
</div>

# flex-grow 和 flex-shrink

当子元素的总长度小于主轴长度时，可以给子元素的样式添加 flex-grow 使其长度增加。

示例：

<div style="display:flex; height:100px;">
    <main style="flex-grow:5; background-color:#212121; color:cyan;">
        main
    </main>
    <aside style="flex-grow:1; background-color:#666; color:yellow;">
        aside
    </aside>
</div>

相似的，当子元素的总长度大于主轴长度时，可以给子元素的样式添加 flex-shrink 使其长度减少。

这两个属性的值表示增加（或减少）的长度占剩余（或溢出）长度的比例。
上例中 main 增加剩余空间的 \(\frac{5}{5+1}\)，aside 增加剩余空间的 \(\frac{1}{5+1}\) 。

# 主轴上的对齐方式

默认情况下，子元素在容器主轴上向起始边缘对齐，可以通过容器的 justify-content 属性修改对齐方式。

  • start - 子元素在容器主轴上向起始边缘对齐

  • end - 子元素在容器主轴上向末端边缘对齐

  • center - 子元素在容器主轴上居中对齐

  • space-between - 子元素在容器主轴均匀分布，两端不留空

  • space-around - 子元素在容器主轴均匀分布，两端留空为间隔的一半

  • space-evenly - 子元素在容器主轴均匀分布，两端留空和间隔一致

示例：

<div style="display:flex; justify-content:start; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:end; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:center; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:space-between; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:space-around; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:space-evenly; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

# 交叉轴上的对齐方式

默认情况下，子元素在容器交叉轴上两端对齐，即占满整个交叉轴。可以通过容器的 align-items 属性修改对齐方式。

  • stretch - 子元素在容器交叉轴上两端对齐

  • start - 子元素在容器交叉轴上向起始边缘对齐

  • end - 子元素在容器交叉轴上向末端边缘对齐

  • center - 子元素在容器交叉轴上居中对齐

示例：

<div style="display:flex; align-items:stretch; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; align-items:start; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; align-items:end; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; align-items:center; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

# 换行

默认情况下，当子元素的总长度大于主轴长度时，子元素会溢出显示。 可以通过容器的 flex-wrap 属性让溢出的元素换行。

  • nowrap - 不换行

  • wrap - 当空间不足时自动换行

  • wrap-reverse - 当空间不足时自动换行，并且行的顺序逆转

示例：

<div style="display:flex; align-items:center; flex-wrap:nowrap; background-color:#212121;">
    <div style="background-color:red;color:white; width:80px;">item</div>
    <div style="background-color:green;color:white; width:80px;">item</div>
    <div style="background-color:blue;color:white; width:80px;">item</div>
    <div style="background-color:orange;color:white; width:80px;">item</div>
    <div style="background-color:purple;color:white; width:80px;">item</div>
    <div style="background-color:cyan;color:white; width:80px;">item</div>
</div>

<div style="display:flex; align-items:center; flex-wrap:wrap; background-color:#212121;">
    <div style="background-color:red;color:white; width:80px;">item</div>
    <div style="background-color:green;color:white; width:80px;">item</div>
    <div style="background-color:blue;color:white; width:80px;">item</div>
    <div style="background-color:orange;color:white; width:80px;">item</div>
    <div style="background-color:purple;color:white; width:80px;">item</div>
    <div style="background-color:cyan;color:white; width:80px;">item</div>
</div>

<div style="display:flex; align-items:center; flex-wrap:wrap-reverse; background-color:#212121;">
    <div style="background-color:red;color:white; width:80px;">item</div>
    <div style="background-color:green;color:white; width:80px;">item</div>
    <div style="background-color:blue;color:white; width:80px;">item</div>
    <div style="background-color:orange;color:white; width:80px;">item</div>
    <div style="background-color:purple;color:white; width:80px;">item</div>
    <div style="background-color:cyan;color:white; width:80px;">item</div>
</div>

# 行在交叉轴上的对齐方式

通过容器的 align-content 属性设置行在交叉轴上的对齐方式。

  • start - 行在容器交叉轴上向起始边缘对齐

  • end - 行在容器交叉轴上向末端边缘对齐

  • center - 行在容器交叉轴上居中对齐

  • space-between - 行在容器交叉轴上均匀分布，两端不留空

  • space-around - 行在容器交叉轴上均匀分布，两端留空为间隔的一半

  • space-evenly - 行在容器交叉轴上均匀分布，两端留空为和间隔一致

示例：

<div style="display:flex; align-content:start; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:end; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:center; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:space-between; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:space-around; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:space-evenly; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>
本文 更新于: 2025-05-31 19:53:16 创建于: 2025-05-31 19:53:16