HTML / 样式 / 边框
HTML / 样式 / 网格布局

约 19143 字

约 96 分钟

#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>

HTML

    

        main

#主轴和交叉轴

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

可以通过容器的 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>

HTML

    

        main

#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>

HTML

    

        main

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

这两个属性的值表示增加（或减少）的长度占剩余（或溢出）长度的比例。
上例中 main 增加剩余空间的 ，aside 增加剩余空间的 。

#主轴上的对齐方式

默认情况下，子元素在容器主轴上向起始边缘对齐，可以通过容器的 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>

justify-content:start

    
item

    
item

    
item




justify-content:end

    
item

    
item

    
item




justify-content:center

    
item

    
item

    
item




justify-content:space-between

    
item

    
item

    
item




justify-content:space-around

    
item

    
item

    
item




justify-content:space-evenly

    
item

    
item

    
item

#交叉轴上的对齐方式

默认情况下，子元素在容器交叉轴上两端对齐，即占满整个交叉轴。可以通过容器的 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>

align-items:stretch

    
item

    
item

    
item




align-items:start

    
item

    
item

    
item




align-items:end

    
item

    
item

    
item




align-items:center

    
item

    
item

    
item

#换行

默认情况下，当子元素的总长度大于主轴长度时，子元素会溢出显示。 可以通过容器的 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>

flex-wrap:nowrap

    flex-wrap:nowrap
    

        
item

        
item

        
item

        
item

        
item

        
item

    




flex-wrap:wrap

    flex-wrap:nowrap
    

        
item

        
item

        
item

        
item

        
item

        
item

    




flex-wrap:wrap-reverse

    flex-wrap:nowrap
    

        
item

        
item

        
item

        
item

        
item

        
item

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

通过容器的 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>

align-content:start

    
item

    
item

    
item




align-content:end

    
item

    
item

    
item




align-content:center

    
item

    
item

    
item




align-content:space-between

    
item

    
item

    
item




align-content:space-around

    
item

    
item

    
item




align-content:space-evenly

    
item

    
item

    
item

创建于 2025/5/20

更新于 2025/5/22

HTML / 样式 / 边框
HTML / 样式 / 网格布局