13-CSS3属性：Flex布局图文详解

前言

CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。

flex 初体验

我们先来看看下面这个最简单的布局：

13-CSS3属性：Flex布局图文详解 - 图1

上面这张图中的布局是我们都熟悉的：默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列。

在此基础之上，如果我给父容器仅仅加一个 display: flex属性，此时，这些子元素的布局会摇身一变：

13-CSS3属性：Flex布局图文详解 - 图2

没错，子元素们会在水平方向上，从左至右排列，就是这么神奇。到此为止，你已经掌握了关于 flex 的一半的知识。

flex 布局的优势

1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。

但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。

2、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。

flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。

flex 的兼容性问题

13-CSS3属性：Flex布局图文详解 - 图3

上图中可以看到， flex 布局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。

但是，比如网易新闻、淘宝这样的大型网站，面对的是海量用户，即便使用低版本浏览器的用户比例很少，但绝对基数仍然是很庞大的。因此，这些网站为了兼容低版本的 IE 浏览器，暂时还不敢尝试使用 flex 布局。

概念：弹性盒子、子元素

在讲 flex 的知识点之前，我们事先约定两个概念：

  • 弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器。

  • 子元素/弹性元素：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。

概念：主轴和侧轴

在上面的“初体验”例子中，我们发现，弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。

在此，我们引入主轴和侧轴的概念。

13-CSS3属性：Flex布局图文详解 - 图4

如上图所示：

  • 主轴：flex容器的主轴，默认是水平方向，从左向右。

  • 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。

PS：主轴和侧轴并不是固定不变的，可以通过 flex-direction 更换方向，我们在后面会讲到。

弹性盒子

声明定义

使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。

备注：一般是用 display:flex这个属性。display:inline-flex用得较少。

flex-direction 属性

flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：

属性值 描述
row 从左到右水平排列子元素（默认值）
column 从上到下垂直排列子元素
row-reverse 从右向左排列子元素
column-reverse 从下到上垂直排列子元素

备注：如果我们不给父容器写flex-direction这个属性，那么，子元素默认就是从左到右排列的。

代码演示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.             list-style: none;
  11.         }
  12.        body{
  13.            background-color: #eee;
  14.            font-family: "Microsoft Yahei";
  15.            font-size:22px;
  16.        }
  18.         h3{
  19.             font-weight: normal;
  20.         }
  21.         section{
  22.             width: 1000px;
  24.             margin:40px auto;
  25.         }
  27.         ul{
  28.             background-color: #fff;
  29.             border: 1px solid #ccc;
  31.         }
  33.         ul li{
  34.             width: 200px;
  35.             height: 200px;
  36.             background-color: pink;
  37.             margin:10px;
  38.         }
  39.         section:nth-child(1) ul{
  40.             overflow: hidden; /* 清除浮动 */
  41.         }
  42.         section:nth-child(1) ul li{
  43.             float: left;
  44.         }
  45.         /* 设置伸缩盒子*/
  46.         section:nth-child(2) ul{
  47.             display: flex;
  48.         }
  50.         section:nth-child(3) ul{
  51.             /* 设置伸缩布局*/
  52.             display: flex;
  53.             /* 设置主轴方向*/
  54.             flex-direction: row;
  55.         }
  57.         section:nth-child(4) ul{
  58.             /* 设置伸缩布局*/
  59.             display: flex;
  60.             /* 设置主轴方向 :水平翻转*/
  61.             flex-direction: row-reverse;
  62.         }
  64.         section:nth-child(5) ul{
  65.             /* 设置伸缩布局*/
  66.             display: flex;
  67.             /* 设置主轴方向 :垂直*/
  68.             flex-direction: column;
  69.         }
  71.         section:nth-child(6) ul{
  72.             /* 设置伸缩布局*/
  73.             display: flex;
  74.             /* 设置主轴方向 :垂直*/
  75.             flex-direction: column-reverse;
  76.         }
  77.     </style>
  78. </head>
  79. <body>
  80.     <section>
  81.         <h3>传统布局</h3>
  82.         <ul>
  83.             <li>1</li>
  84.             <li>2</li>
  85.             <li>3</li>
  86.         </ul>
  87.     </section>
  89.     <section>
  90.         <h3>伸缩布局 display:flex</h3>
  91.         <ul>
  92.             <li>1</li>
  93.             <li>2</li>
  94.             <li>3</li>
  95.         </ul>
  96.     </section>
  98.     <section>
  99.         <h3>主轴方向 flex-direction:row</h3>
  100.         <ul>
  101.             <li>1</li>
  102.             <li>2</li>
  103.             <li>3</li>
  104.         </ul>
  105.     </section>
  107.     <section>
  108.         <h3>主轴方向 flex-direction:row-reverse</h3>
  109.         <ul>
  110.             <li>1</li>
  111.             <li>2</li>
  112.             <li>3</li>
  113.         </ul>
  114.     </section>
  116.     <section>
  117.         <h3>主轴方向 flex-direction:column</h3>
  118.         <ul>
  119.             <li>1</li>
  120.             <li>2</li>
  121.             <li>3</li>
  122.         </ul>
  123.     </section>
  125.     <section>
  126.         <h3>主轴方向 flex-direction:column-reverse</h3>
  127.         <ul>
  128.             <li>1</li>
  129.             <li>2</li>
  130.             <li>3</li>
  131.         </ul>
  132.     </section>
  133. </body>
  134. </html>

flex-wrap 属性

flex-wrap：控制子元素溢出时的换行处理。

justify-content 属性

justify-content：控制子元素在主轴上的排列方式。

弹性元素

justify-content 属性

  • justify-content: flex-start; 设置子元素在主轴上的对齐方式。属性值可以是：

    • flex-start 从主轴的起点对齐（默认值）
    • flex-end 从主轴的终点对齐
    • center 居中对齐
    • space-around 在父盒子里平分
    • space-between 两端对齐 平分

代码演示：（在浏览器中打开看效果）

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.             list-style:none;}
  11.         body{
  12.             background-color: #eee;
  13.             font-family: "Microsoft Yahei";
  15.         }
  16.         section{
  17.             width: 1000px;
  18.             margin:50px auto;
  19.         }
  20.         section h3{
  21.             font-size:22px;
  22.             font-weight: normal;
  23.         }
  25.         ul{
  26.             border: 1px solid #999;
  27.             background-color: #fff;
  28.             display: flex;
  30.         }
  32.         ul li{
  33.             width: 200px;
  34.             height: 200px;
  35.             background: pink;
  36.             margin:10px;
  38.         }
  40.         section:nth-child(1) ul{
  41.             /* 主轴对齐方式：从主轴开始的方向对齐*/
  42.             justify-content: flex-start;
  43.         }
  45.         section:nth-child(2) ul{
  46.             /* 主轴对齐方式：从主轴结束的方向对齐*/
  47.             justify-content: flex-end;
  48.         }
  50.         section:nth-child(3) ul{
  51.             /* 主轴对齐方式：居中对齐*/
  52.             justify-content: center;
  53.         }
  55.         section:nth-child(4) ul{
  56.             /* 主轴对齐方式：在父盒子中平分*/
  57.             justify-content: space-around;
  59.            }
  61.         section:nth-child(5) ul{
  62.             /* 主轴对齐方式：两端对齐 平分*/
  63.             justify-content: space-between;
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <section>
  69.         <h3>主轴的对齐方式：justify-content:flex-start</h3>
  70.         <ul>
  71.             <li>1</li>
  72.             <li>2</li>
  73.             <li>3</li>
  74.         </ul>
  75.     </section>
  77.     <section>
  78.         <h3>主轴的对齐方式：justify-content:flex-end</h3>
  79.         <ul>
  80.             <li>1</li>
  81.             <li>2</li>
  82.             <li>3</li>
  83.         </ul>
  84.     </section>
  86.     <section>
  87.         <h3>主轴的对齐方式：justify-content:center</h3>
  88.         <ul>
  89.             <li>1</li>
  90.             <li>2</li>
  91.             <li>3</li>
  92.         </ul>
  93.     </section>
  95.     <section>
  96.         <h3>主轴的对齐方式：justify-content:space-round</h3>
  97.         <ul>
  98.             <li>1</li>
  99.             <li>2</li>
  100.             <li>3</li>
  101.         </ul>
  102.     </section>
  104.     <section>
  105.         <h3>主轴的对齐方式：justify-content:space-bettwen</h3>
  106.         <ul>
  107.             <li>1</li>
  108.             <li>2</li>
  109.             <li>3</li>
  110.             <li>4</li>
  111.         </ul>
  112.     </section>
  113. </body>
  114. </html>

align-items 属性

align-items：设置子元素在侧轴上的对齐方式。属性值可以是：

  • flex-start 从侧轴开始的方向对齐
  • flex-end 从侧轴结束的方向对齐
  • baseline 基线 默认同flex-start
  • center 中间对齐
  • stretch 拉伸

代码演示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.             list-style:none;
  11.         }
  12.         body{
  13.             background-color: #eee;
  14.             font-family: "Microsoft Yahei";
  16.         }
  17.         section{
  18.             width: 1000px;
  19.             margin:50px auto;
  20.         }
  21.         section h3{
  22.             font-size:22px;
  23.             font-weight: normal;
  24.         }
  26.         ul{
  27.             border: 1px solid #999;
  28.             background-color: #fff;
  29.             display: flex;
  30.             height:500px;
  32.         }
  34.         ul li{
  35.             width: 200px;
  36.             height: 200px;
  37.             background: pink;
  38.             margin:10px;
  40.         }
  42.         section:nth-child(1) ul{
  43.             /* 侧轴对齐方式 ：从侧轴开始的方向对齐*/
  44.             align-items:flex-start;
  45.         }
  47.         section:nth-child(2) ul{
  48.             /* 侧轴对齐方式 ：从侧轴结束的方向对齐*/
  49.             align-items:flex-end;
  50.         }
  52.         section:nth-child(3) ul{
  53.             /* 侧轴对齐方式 ：居中*/
  54.             align-items:center;
  55.         }
  57.         section:nth-child(4) ul{
  58.             /* 侧轴对齐方式 ：基线 默认同flex-start*/
  59.             align-items:baseline;
  60.         }
  62.         section:nth-child(5) ul{
  63.             /* 侧轴对齐方式 ：拉伸*/
  64.             align-items:stretch;
  66.         }
  68.         section:nth-child(5) ul li{
  69.             height:auto;
  70.         }
  73.     </style>
  74. </head>
  75. <body>
  76. <section>
  77.     <h3>侧轴的对齐方式:align-items ：flex-start</h3>
  78.     <ul>
  79.         <li>1</li>
  80.         <li>2</li>
  81.         <li>3</li>
  82.     </ul>
  83. </section>
  85. <section>
  86.     <h3>侧轴的对齐方式：align-items:flex-end</h3>
  87.     <ul>
  88.         <li>1</li>
  89.         <li>2</li>
  90.         <li>3</li>
  91.     </ul>
  92. </section>
  94. <section>
  95.     <h3>侧轴的对齐方式：align-items:center</h3>
  96.     <ul>
  97.         <li>1</li>
  98.         <li>2</li>
  99.         <li>3</li>
  100.     </ul>
  101. </section>
  103. <section>
  104.     <h3>侧轴的对齐方式：align-itmes:baseline</h3>
  105.     <ul>
  106.         <li>1</li>
  107.         <li>2</li>
  108.         <li>3</li>
  109.     </ul>
  110. </section>
  112. <section>
  113.     <h3>侧轴的对齐方式：align-itmes: stretch</h3>
  114.     <ul>
  115.         <li>1</li>
  116.         <li>2</li>
  117.         <li>3</li>
  118.     </ul>
  119. </section>
  120. </body>
  121. </html>

flex属性：设置子盒子的权重

代码演示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.             list-style:none;
  11.         }
  12.         body{
  13.             background-color: #eee;
  14.             font-family: "Microsoft Yahei";
  16.         }
  17.         section{
  18.             width: 1000px;
  19.             margin:50px auto;
  20.         }
  21.         section h3{
  22.             font-size:22px;
  23.             font-weight: normal;
  24.         }
  26.         ul{
  27.             border: 1px solid #999;
  28.             background-color: #fff;
  29.             display: flex;
  31.         }
  33.         ul li{
  34.             width: 200px;
  35.             height: 200px;
  36.             background: pink;
  37.             margin:10px;
  39.         }
  41.         section:nth-child(1) ul li:nth-child(1){
  42.             flex:1;
  43.         }
  45.         section:nth-child(1) ul li:nth-child(2){
  46.             flex:1;
  47.         }
  49.         section:nth-child(1) ul li:nth-child(3){
  50.             flex:8;
  51.         }
  53.         section:nth-child(2) ul li:nth-child(1){
  55.         }
  57.         section:nth-child(2) ul li:nth-child(2){
  58.             flex:1;
  59.         }
  61.         section:nth-child(2) ul li:nth-child(3){
  62.            flex:4;
  63.         }
  66.     </style>
  67. </head>
  68. <body>
  69. <section>
  70.     <h3>伸缩比例:flex</h3>
  71.     <ul>
  72.         <li>1</li>
  73.         <li>2</li>
  74.         <li>3</li>
  75.     </ul>
  76. </section>
  78. <section>
  79.     <h3>伸缩比例:flex</h3>
  80.     <ul>
  81.         <li>1</li>
  82.         <li>2</li>
  83.         <li>3</li>
  84.     </ul>
  85. </section>
  88. </body>
  89. </html>

相关链接

CSS Flexbox 可视化手册

可视化的截图如下：（请点开链接，查看大图）

http://img.smyhvae.com/20190821_2101.png

相关文章：

flex 相关的推荐文章

flex 相关的教程

技巧：使用 margin 自动撑满剩余空间