结论

Flex 是一维弹性布局，与方向无关，靠主轴和交叉轴分配空间。容器上设 display:flex，用 flex-direction 定主轴方向、justify-content 管主轴对齐、align-items 管交叉轴对齐；项目上用 flex-grow/shrink/basis 控制伸缩。

最后更新：2026-09-17 · 基于 CSS Flexible Box Layout Module Level 1，所有现代浏览器均已支持

五、Flex布局


阮一峰flex教程

flex学习游戏：

http://flexboxfroggy.com/#zh-cn

http://www.flexboxdefense.com/

1. Flex之前布局使用的技术

  • normal flow (正常流，也叫文档流)：内联元素从左到右，块元素从上到下
  • float + clear ： 左右、两列、三列布局
  • position(relative + absolute):
  • display inline-block ： 一些横向布局：导航
  • 负 margin： 扩大宽度或产生位移

2. Flex 特点

一种新的布局方式

  • 块级布局侧重垂直方向、行内布局侧重水平方向，Flex布局是与方向无关的
  • Flex布局可以实现空间自动分配、自动对齐(flexble:弹性、灵活)
  • Flex 适用于简单的线性布局，更复杂的布局交给grid布局(还没发布)

3. 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
+-----------------------------------+------------------------+ <-- cross start
|                                   ^                        |
|   flex container                  |                        |
|                                 cross axis                 |
| <------ main axis ----------------+--------------------->  |
|                                   |                        |
|           +---------------------+ | +--------------+----+  |
|           | flex item           | | |flex item     ^    |  |
|           |                     | | |              |    |  |
|           |                     | | |        cross size |  |
|           | <--+ main size ---> | | |              |    |  |
|           |                     | | |              v    |  |
|           +---------------------+ | +--------------+----+  |
|                                   |                        |
| <-- mian start                    |       main end +-----> |
|                                   |                        |
|                                   v                        |
+------------------------------------------------------------+ <-- cross end

4. flex container 的属性

属性 说明
flex-direction 设置主轴的方向
flex-wrap 换行
flex-flow 上面两个的简写
justify-content 主轴方向对齐方式
align-items 侧轴对齐方式
align-content 多行/列内容对齐方式(用得少)

4.1 flex-direction:设置主轴排列方向

flex-direction有四个值：

  • row(默认值)：水平排列(行)，起点在左边
  • row-reverse: 水平排列，起点在右边
  • column: 垂直排列，起点在上面
  • column-reverse: 垂直排列，起点在下面
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .parent {
      border: 1px solid red; display: flex;
      flex-direction: column;
    }
    .child {
      border: 1px solid green; width: 100px; height: 50px;
    }
</style>
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

4.2 flex-wrap:换行设置，一行排不下时

flex-wrap属性定义，如果一条轴线排不下，如何换行。 默认不换行。

flex-wrap的取值：

  • nowrap(默认): 不换行， 此时 设置子元素宽度无效
  • wrap: 换行，第一行在上面
  • wrap-reverse: 换行，第一行在下面

4.3 flex-flow：flex-direction与flex-wrap的简写

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap.

也可以只写一个属性

1
2
3
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4.4. justify-content:主轴对齐方式

定义项目在主轴上的对齐方式。

justify-content的取值：

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

下面的代码实现的右侧对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .parent {
      border: 1px solid red; display: flex;
      flex-flow: wrap-reverse;
      justify-content: flex-end;
    }
    .child {
      border: 1px solid green; width: 150px; height: 50px;
    }
  </style>
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

4.5 align-items:定义交叉轴上如何对齐

定义项目在交叉轴上如何对齐。

align-items的取值：

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

下面的例子实现了垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .parent {
        border: 1px solid red; display: flex;
        align-items: center;
    }
    .child { border: 1px solid green; width: 150px; }
</style>
<div class="parent">
  <div class="child">1 <br> 1 <br> 1 <br></div>
  <div class="child">2 <br> 2</div>
  <div class="child">3</div>
</div>

4.6 align-content:多个轴线的对齐方式

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content的取值：

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

5. item子元素的属性

名称 说明
flex-grow 放大比例(空间过多时)。默认为0，即如果存在剩余空间，也不放大
flex-shrink 缩小比例(空间不够时)。默认为1，即如果空间不足，该项目将缩小
flex-basis 默认大小(一般不用)
flex 上面三个的缩写
order 项目的排列顺序。数值越小，排列越靠前，默认为0
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

5.1 flex-grow:放大比例(空间有剩余)

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

下面的例子中只有第一个子元素设置了lex-grow属性，所以剩下的空间都分配给了第一个子元素。

1
2
3
4
5
6
7
8
9
10
<style>
    .parent { border: 1px solid red; display: flex; align-items: center; }
    .child { border: 1px solid green; }
    .child:nth-child(1) { flex-grow: 1; }
</style>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

5.2 flex-shrink:缩小比例(空间不够时)

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

下面的例子中，第二个子元素缩放比例比第一个大，所以空间不足时，第二个收缩更多。

1
2
3
4
5
6
7
8
9
10
11
<style>
    .parent { border: 1px solid red; display: flex; width: 200px; }
    .child { border: 1px solid green; }
    .child:nth-child(1) { flex-shrink: 2 }
    .child:nth-child(2) { flex-shrink: 3 }
</style>
<div class="parent">
    <div class="child">1 111 111 he llo wor ld</div>
    <div class="child">2 22 22 22 th an kss sss</div>
    <div class="child">3 33333 ttt ttt</div>
</div>

5.3 flex-basis:主轴上的初始尺寸

设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定

1
2
3
.item {
   flex-basis: <length> | auto; /* default auto */
}

当设置为0时，会根据内容撑开。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

在下面的例子中，设置了第一个子元素宽度为200px(在空间足够的情况下)，如果空间不足，则此设置无效。

1
2
3
4
5
6
7
8
9
10
<style>
  .parent { border: 1px solid red; display: flex;  }
  .child { border: 1px solid green; }
  .child:nth-child(1) { flex-basis: 200px; }
</style>
<div class="parent">
  <div class="child">hello world</div>
  <div class="child">2 22 22 22 th an kss sss</div>
  <div class="child">3 33333 ttt ttt</div>
</div>

5.4 flex：flex-grow、flex-shrink、flex-basis的缩写

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

一些属性有：

  • flex: 1 等于 flex: 1 1 0%
  • flex: 2 等于 flex: 2 1 0%
  • flex: auto 等于 flex: 1 1 auto
  • flex: none 等于 flex: 0 0 auto，常用于固定尺寸不伸缩

flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别。

当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸。

当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑。

注意：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

5.5 order：项目的排列顺序

IE8浏览器不支持这个属性。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

下面的例子中，第一个子元素排到了最后面。

1
2
3
4
5
6
7
8
9
10
<style>
    .parent { border: 1px solid red; display: flex;  }
    .child { border: 1px solid green; }
    .child:nth-child(1) { order: 1 }
</style>
<div class="parent">
    <div class="child">1111</div>
    <div class="child">2222</div>
    <div class="child">3333</div>
</div

5.6 align-self：允许单个项目有与其他项目不一样的对齐方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

1
2
3
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

下面的例子中，父元素设置了子元素垂直方向顶部对齐，但是可以单独在子元素中设置不遵守这个约定。

1
2
3
4
5
6
7
8
9
10
11
<style>
    .parent { border: 1px solid red; display: flex; 
        align-items: flex-start; }
    .child { border: 1px solid green;  width: 50px;}
    .child:nth-child(3) { align-self: flex-end; }
</style>
<div class="parent">
    <div class="child">111 <br> 1111 <br> 11 <br></div>
    <div class="child">2222 <br> 22</div>
    <div class="child">3333</div>
</div>

6. 使用flex编写的一些布局

6.1 手机页面布局(toobar + main + tabs)

上面是header头部，中间是main主内容，下面是footer， header和footer固定， 中间出现滚动条。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
    * { margin: 0; padding: 0;  box-sizing: border-box; }
    ul { list-style: none;}
    .container { height: 100vh; border: 1px solid;
        display: flex; flex-direction: column;
    }
    header { height: 100px;  background: #ddd; border: 1px solid red; }
    main { flex-grow: 1; overflow: auto; }
    footer > ul { display: flex; height: 100px; }
    footer > ul > li { background: red; width: 25%; border: 1px solid blue; }
</style>
<div class="container">
    <header>头部内容</header>
    <main>
        <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
        <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
        <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
        <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
        <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
    </main>
    <footer>
        <ul>
            <li>菜单</li><li>菜单</li><li>菜单</li><li>菜单</li>
        </ul>
    </footer>
</div>
<!-- https://jsbin.com/dogeyoz/1/edit?html,output -->

6.2 产品列表(ul>li*9)

九宫格列表：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    * { margin: 0; padding: 0;  box-sizing: border-box; }
    ul { list-style: none; border: 1px solid; width: 350px; margin: auto;
        display: flex; flex-wrap: wrap; justify-content: space-around;
    }
    ul > li { border: 1px solid red; width: 100px; height: 100px; margin: 10px 0; }
</style>
<ul>
    <li></li><li></li><li></li>
    <li></li><li></li><li></li>
    <li></li><li></li><li></li>
</ul>
<!-- https://jsbin.com/tolajem/edit?html,output -->

6.3 PC页面布局

上面是头部，下面是footer，中间main分三列显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    header,footer{ border: 1px solid; height: 100px; background: #ddd; }
    .content { display: flex; }
    .content > aside { width: 60px; background: #444; }
    .content > main { height: 400px; background: red; flex: 1;
    }
    .content > nav { width: 60px; background: green; }
</style>
<header></header>
<div class="content">
    <aside id=asidel></aside>
    <main></main>
    <nav></nav>
</div>
<footer></footer>
<!-- https://jsbin.com/pivusux/1/edit?html,output -->

6.4 完美居中

父元素高度固定， 子元素宽高不确定， 水平垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    .parent {
        height: 400px; border: 1px solid;
        background: #ddd;
        display: flex; justify-content: center;
        align-items: center;
    }
    .child {border: 1px solid red;}
</style>
<div class="parent">
    <div class="child">
        dsadasdsa
    </div>
</div>
<!-- https://jsbin.com/yuxomej/1/edit?html,output -->

常见问题

flex 布局和 grid 布局有什么区别，什么时候用哪个

Flex 是一维的，一次只处理一个方向（横排或竖排）；Grid 是二维的，行和列同时管。组件内部的线性排列用 Flex 就够了，整体页面结构和需要同时控制行列的卡片网格用 Grid 更合适。

justify-content 和 align-items 分别控制哪个方向

justify-content 控制主轴方向的对齐，align-items 控制交叉轴方向的对齐。主轴方向由 flex-direction 决定：默认 row 时主轴是水平的，改成 column 后主轴变成垂直的，这两个属性的作用方向也跟着对调。

flex:1 到底等于什么

flex:1 是 flex-grow:1、flex-shrink:1、flex-basis:0% 的简写。意思是项目可以放大、可以缩小，且计算剩余空间时基准尺寸按 0 算——所以多个 flex:1 的项目会等分容器空间，不受各自内容宽度影响。

为什么给 flex 项目设了 width 却不生效

因为 flex-basis 的优先级高于 width。当 flex-basis 不是 auto 时，它会覆盖 width。想让 width 生效，把 flex-basis 设为 auto，或者直接用 flex-basis 代替 width。