flex 布局概述

flex 是什么

flex 是 Flexible Box 的缩写,意为弹性布局
flex 2009 年就已出现,浏览器兼容性很好,请放心使用

flex 解决了什么问题

块元素的垂直居中, flex 可以轻松解决
元素大小在容器中的自动伸缩,以适应容器的变化,特别适合移动端布局

项目的布局方向是什么

一个物体在一个平面中, 要么水平排列, 要么垂直排列, flex 借鉴了这个思想
flex 是一维布局, 项目任何时候只能沿一个方向排列,要么水平, 要么垂直
flex 项目排列的方向, 称为主轴, 水平和垂直二种
与主轴垂直的称为交叉轴(有的教程也称之为副轴/侧轴)

flex 布局中常用术语有哪些(三个二)

序号	简记	术语
1	二成员	容器和项目(`container / item`)
2	二根轴	主轴与交叉轴(`main-axis / cross-axis`)
3	二根线	起始线与结束线(`

1.flex 容器与项目

1.1. `display`属性

序号	属性值	描述	备注
1	`flex;`	创建 flex 块级容器	内部子元素自动成为 flex 项目
2	`inline-flex;`	创建 flex 行内容器	内部子元素自动成为 flex 项目

1.2. flex 容器与项目特征

序号	容器/项目	默认行为
1	容器主轴	水平方向
2	项目排列	沿主轴起始线排列(当前起始线居左)
3	项目类型	自动转换”行内块级”元素,不管之前是什么类型
4	容器主轴空间不足时	项目自动收缩尺寸以适应空间变化,不会换行显示
5	容器主轴存在未分配空间时	项目保持自身大小不会放大并充满空间

1.3. 创建容器与项目：

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        /* display: inline-flex; */
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 50px;
        background-color: rgb(255, 230, 0);
        font-size: 1rem;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">项目1</div>
      <div class="item">项目2</div>
      <div class="item">项目3</div>
      <div class="item">项目4</div>
    </div>
  </body>
</html>

2.flex 容器主轴方向

2.1. `flex-direction`属性

序号	属性值	描述
1	`row`默认值	主轴水平: 起始线居中,项目从左到右显示
2	`row-reverse`	主轴水平:起始线居右, 项目从右向左显示
3	`column`	主轴垂直: 起始线居上,项目从上向下显示
4	`column-reverse`	主轴垂直: 起始线居下,项目从下向上显示

2.2主轴方向演练效果图：

项目从右往左排列：

项目垂直从小到大排列：

项目垂直从大到小排列：

2.3主轴方向演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴方向</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        /* display: inline-flex; */
      }
      /* 主轴方向：所有的项目必须沿主轴排列 */
      .container {
        /* 默认主轴为水平，行的方向 */
        flex-direction: row;
        /* 项目从右往左排列 */
        flex-direction: row-reverse;
        /* 项目垂直从小到大排列 */
        flex-direction: column;
        /* 项目垂直从大到小排列 */
        flex-direction: column-reverse;
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 50px;
        background-color: rgb(206, 209, 27);
        font-size: 1.5rem;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

3.flex 容器主轴项目换行

3.1. `flex-wrap`属性

序号	属性值	描述
1	`nowrap`默认值	项目不换行: 单行容器
2	`wrap`	项目换行: 多行容器,第一行在上方
3	`wrap-reverse`	项目换行: 多行容器,第一行在下方

3.2主轴方向演练效果图：

主轴上的项目不允许换行：

主轴上的项目允许换行：

主轴上的项目项目反向排列：

3.3主轴方向演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴方向</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器、父元素设置为flex容器 */
      .container {
        display: flex;
        /* display: inline-flex */
      }
      /* 主轴方向：所有的项目必须沿主轴排列 */
      .container {
        /* 默认主轴为水平，行的方向 */
        flex: -diretion:row;
      }
      /* 主轴上的项目换行显示 */
      .container {
        flex-wrap: nowrap;
        /* 如果允许换行，当前容纳不下的项目会换行显示，此时创建的容器 */
        flex-wrap: wrap;
          /* 项目反向排列 */
        flex-wrap: wrap-reverse;
      }
        .item {
          width: 100px;
          height: 50px;
          background-color: chartreuse;
          font-size: 1.5rem;
          text-align: center;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

4.flex 容器主轴与项目换行简写

4.1. `flex-flow`属性

flex-flow是属性flex-direction(当前的主轴方向）和flex-wrap（项目是否换行）的简写
语法: flex-flow: flex-direction flex-wrap

属性值	描述
`row nowrap`默认值	主轴水平, 项目不换行

以后推荐只用它

4.2 容器主轴与项目换行简写代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴方向与是否换行的简写</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器父元素设置为flex容器 */
      .container {
        display: flex;
      }
      /* 主轴方向：所有的项目必须沿主轴排列 */
      .container {
        /* `默认值 | 主轴水平, 项目不换行 */
        flex -flow:row nowrap;
        /* 主轴水平, 项目允许换行 */
        flex-flow:row wrap;
        /* 以列排列, 项目不允许换行 */
        /* flex-flow:column nowrap; */
        /* 以列排列, 项目允许换行 */
        /* flex-flow: column wrap; */
      }
      /* 简写 */
      .item {
        width: 100px;
        height: 50px;
        font-size: 1.5rem;
        background-color: chocolate;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

5.flex 容器主轴项目对齐

5.1. `justify-content`属性

当容器中主轴方向上存在剩余空间时, 该属性才有意义

序号	属性值	描述
1	`flex-start`默认	所有项目与主轴起始线对齐
2	`flex-end`	所有项目与主轴终止线对齐
3	`center`	所有项目与主轴中间线对齐: 居中对齐
4	`space-between`	两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5	`space-around`	分散对齐: 剩余空间在每个项目二侧平均分配
6	`space-evenly`	平均对齐: 剩余空间在每个项目之间平均分配

5.2. flex 容器主轴项目对齐演练效果图：

主轴起始线对齐:

终止线对齐:

居中对齐:

两端对齐:

分散对齐:

平均对齐:

5.3. flex 容器主轴项目对齐演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴项目对齐方式</title>
  </head>
  <style>
    .container {
      width: 300px;
      height: 150px;
    }
    .container {
      display: flex;
    }
    .item {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
      background-color: chocolate;
    }
    .container {
      /* 主轴起始线对齐 */
      justify-content: flex-start;
      /* 终止线对齐 */
      justify-content: flex-end;
      /* 居中对齐 */
      justify-content: center;
      /* 两端对齐 */
      justify-content: space-between;
      /* 分散对齐 */
      justify-content: space-around;
      /* 平均对齐 */
      justify-content: space-evenly;
    }
  </style>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

6.flex 容器交叉轴项目对齐

6.1. `align-items`属性

该属性仅适用于: 单行容器
当容器中交叉轴方向上存在剩余空间时, 该属性才有意义

序号	属性值	描述
1	`flex-start`默认	与交叉轴起始线对齐
2	`flex-end`	与交叉轴终止线对齐
3	`center`	与交叉轴中间线对齐: 居中对齐

5.2. flex 容器交叉轴项目对齐演练效果图：

默认与交叉轴起始线对齐:

与交叉轴终止线对齐:

与交叉轴中间线居中对齐:

5.3. flex 容器交叉轴项目对齐演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>交叉轴项目对齐</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
      }
      .container {
        display: flex;
      }
      .container {
        /* 默认与交叉轴起始线对齐 */
        align-items: flex-start;
        /* 与交叉轴终止线对齐 */
        align-items: flex-end;
        /* 与交叉轴中间线居中对齐 */
        align-items: center;
      }
      .item {
        width: 50px;
        height: 50px;
        background-color: chocolate;
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

7.flex 多行容器交叉轴项目对齐

7.1. `align-content`属性

该属性仅适用于: 多行容器
多行容器中, 交叉轴会有多个项目, 剩余空间在项目之间分配才有意义

序号	属性值	描述
1	`stretch`默认	项目拉伸占据整个交叉轴
1	`flex-start`	所有项目与交叉轴起始线(顶部)对齐
2	`flex-end`	所有项目与交叉轴终止线对齐
3	`center`	所有项目与交叉轴中间线对齐: 居中对齐
4	`space-between`	两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5	`space-around`	分散对齐: 剩余空间在每个项目二侧平均分配
6	`space-evenly`	平均对齐: 剩余空间在每个项目之间平均分配

提示: 多行容器中通过设置flex-wrap: wrap | wrap-reverse实现

5.2. flex 多行容器交叉轴项目对齐演练效果图：

自动拉伸默认:

所有项目与交叉轴起始线(顶部)对齐:

所有项目与交叉轴终止线对齐:

所有项目与交叉轴中间线对齐: 居中对齐:

两端对齐: 剩余空间在头尾项目之外的项目间平均分配:

分散对齐: 剩余空间在每个项目二侧平均分配:

平均对齐: 剩余空间在每个项目之间平均分配:

5.2. flex 容器交叉轴项目对齐演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>交叉轴项目对齐方式</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
      }
      .item {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        background-color: burlywood;
      }
      .container {
        display: flex;
      }
      .container {
        flex-flow: row wrap;
        /* 自动拉伸 默认*/
        align-content: stretch;
        /* 所有项目与交叉轴起始线(顶部)对齐 */
        align-content: flex-start;
        /* 所有项目与交叉轴终止线对齐 */
        align-content: flex-end;
        /* 所有项目与交叉轴中间线对齐: 居中对齐 */
        align-content: center;
        /* 两端对齐: 剩余空间在头尾项目之外的项目间平均分配 */
        align-content: space-between;
        /* 分散对齐: 剩余空间在每个项目二侧平均分配 */
        align-content: space-around;
        /* 平均对齐: 剩余空间在每个项目之间平均分配  */
        align-content: space-evenly;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

8.flex 项目交叉轴单独对齐

8.1. `align-self`属性

该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式

序号	属性值	描述
1	`auto`默认值	继承 `align-items` 属性值
2	`flex-start`	与交叉轴起始线对齐
3	`flex-end`	与交叉轴终止线对齐
4	`center`	与交叉轴中间线对齐: 居中对齐
5	`stretch`	在交叉轴方向上拉伸
6	`baseline`	与基线对齐(与内容相关用得极少)

8.2. flex 项目交叉轴单独对齐演练效果图：

分组的第一个子元素:

分组后的任意位置第二位:

分组后的任意位置第三位:

分组最后的一位:

8.3. flex 项目交叉轴单独对齐演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目顺序</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
      }
      .item {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        background-color: cadetblue;
        order: 0;
      }
      .container {
        display: flex;
      }
      .item:first-of-type/*分组的第一个子元素*/ {
        order: 4;
        background-color: lightgreen;
      }
      .item:nth-of-type(2)/*分组后的任意位置第二位*/ {
        background-color: lightcoral;
        order: 3;
      }
      .item:nth-of-type(3)/*分组后的任意位置第三位*/ {
        background-color: rgb(68, 151, 12);
        order: 2;
      }
      .item:last-of-type/*分组最后的一位*/ {
        order: 1;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

9.flex 项目放大因子

9.1. `flex-grow`属性

在容器主轴上存在剩余空间时, flex-grow才有意义
该属性的值,称为放大因子, 常见的属性值如下:

序号	属性值	描述
1	`0`默认值	不放大,保持初始值
2	`initial`	设置默认值,与`0`等效
3	`n`	放大因子: 正数

9.2 flex 项目放大因子演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目放大因子</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
      }
      .container {
        display: flex;
      }
      .item {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        background-color: lightsalmon;
        /* 默认不放大 */
        flex-grow: initial;
        flex-grow: 0;
      }
      /*
      主轴剩余空间 300 - 50*3 = 150px;
      当前每个项目的放大因子是1, 一共3个项目,所以因子之和是3, 150 / 3 = 50
      每一个项目分到了50px
      再将每个项目在原宽度基础上增加50px, 得到新的宽度
      */
      .item:first-of-type /*分组中的第一个*/ {
        background-color: lightgreen;
        flex-grow: 1;
      }
      .item:nth-of-type(2)/*分组中的任意位置第二位*/ {
        background-color: lightcoral;
        flex-grow: 2;
      }
      .item:last-of-type/*分组中的最后一位*/ {
        background-color: wheat;
        flex-grow: 3;
      }
      /*
      150px要分配给每个项目
      放大因子之和:  150 / (1+2+3) = 25px;
      每个项目根据自己的放大因子来分配
      第一个因子是1, 分到1 * 25 =25, 50 + 25 = 75px
      第二个因子是2, 分到2 * 25 = 50 , 50 +50 = 100px
      第三个因子是3, 分到3*25 = 75px, 50 + 75px = 125px;
      */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

10.flex 项目计算尺寸

10.1. `flex-basis`属性

在分配多余空间之前,项目占据的主轴空间
浏览器根据这个属性，计算主轴是否有多余空间
该属性会覆盖项目原始大小(width/height)
该属性会被项目的min-width/min-height值覆盖

序号	属性值	描述
1	`auto`	默认值: 项目原来的大小
2	`px`	像素
3	`%`	百分比

优先级: 项目大小 < flex-basis < min-width/height

10.2 flex 项目计算尺寸演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目在主轴上的计算宽度</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
      }
      .container {
        display: flex;
        flex-flow: row wrap;
      }
      .item {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        background-color: cyan;
      }
      .item {
        /* auto==width */
        flex-basis: 70px;
        flex-basis: 20%;
        flex: basis:5rem;
        /* min-width/max-width权重大于flex-basis */
        max-width: 100px;
        flex-basis:150px;
        /* width < flex-basis < min/max-width */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

11.flex 项目收缩因子

11.1. `flex-shrink`属性

当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
该属性的值,称为收缩因子, 常见的属性值如下:

序号	属性值	描述
1	`1`默认值	允许项目收缩
2	`initial`	设置初始默认值,与 1 等效
3	`0`	禁止收缩,保持原始尺寸
4	`n`	收缩因子: 正数

11.2flex 项目收缩因子演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目收缩因子</title>
    <style>
      .container {
        width: 180px;
        height: 150px;
      }
      .container {
        display: flex;
        /* 不换行 */
        flex-flow: row nowrap;
      }
      .item {
        width: 100px;
        height: 50px;
        font-size: 1.5rem;
        background-color: cyan;
        /* 禁止收缩 */
        flex-shrink: 0;
      }
      .item:first-of-type /* 第一个 */ {
        background-color: lightgreen;
        /* 默认值允许收缩 */
        flex-shrink: 1;
      }
      .item:nth-of-type(2) /* 第二个 */ {
        background-color: lightcoral;
        flex-shrink: 2;
      }
      .item:last-of-type {
        background-color: wheat;
        flex-shrink: 3;
      }
      /*
      当前三个项目宽度超出了主轴空间多少: 300 - 180 = 120px, 说明有120px要让三个项目消化掉
      三个项目的收缩因子之和: 6
      每一份就是: 120 /6 = 20
      第一个项目:  100 - 1 * 20 = 80px
      第二个项目: 100 - 2* 20 = 60px
      第三个项目: 100 - 2* 30 = 40px
      */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

12.flex 项目缩放的简写

12.1. `flex`属性

项目放大,缩小与计算尺寸,对于项目非常重要,也很常用
每次都要写这三个属性,非常的麻烦,且没有必要
flex属性,可以将以上三个属性进行简化:
语法: flex: flex-grow flex-shrink flex-basis

12.2 三值语法

序号	属性值	描述
1	第一个值: 整数	`flex-grow`
2	第二个值: 整数	`flex-shrink`
3	第三个值: 有效宽度	`flex-basis`

举例:

序号	案例	描述
1	`flex: 0 1 auto`	默认值: 不放大,可收缩, 初始宽度
2	`flex: 1 1 auto`	项目自动放大或收缩适应容器
3	`flex: 0 0 100px`	按计算大小填充到容器中

12.3 双值语法

序号	属性值	描述
1	第一个值: 整数	`flex-grow`
3	第二个值: 有效宽度	`flex-basis`

举例:

案例	描述
`flex: 0 180px`	禁止放大,按计算大小填充到容器中

12.4 单值语法

序号	属性值	描述
1	整数	`flex-grow`
2	有效宽度	`flex-basis`
3	关键字	`initial	auto	none`

举例:

序号	案例	描述
1	`flex: 1`	`flex: 1 1 auto`
2	`flex: 180px`	`flex: 1 1 180px`
3	`initial`	`flex: 0 1 auto`
4	`auto`	`flex: 1 1 auto`
5	`none`	`flex: 0 0 auto`

推荐使用flex, 就像推荐使用flex-grow设置主轴与换行一样

12.5 flex 项目缩放的简写演练代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 50px;
        background-color: cyan;
        font-size: 1.5rem;
      }
      .item:first-of-type {
        background-color: lightgreen;
        /* 默认:不放大,允许收缩, 以项目的width为准 */
        flex: 0 1 auto;
        flex: 1 1 auto;
        /* flex: 0 1 80px; */
      }
      .item:nth-of-type(2) {
        background-color: lightcoral;
        flex: 0 100px;
      }
      .item:last-of-type {
        background-color: wheat;
        flex: auto;
        flex: 1;
        flex: none;
        flex: 0 0 auto;
        flex: 0 0 250px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

学习总结：

在本节课中学到了如何运用flex，它是一个容器，很神奇里面可以装很多项目。
可以设置主轴交叉轴的排列方式，每设定一种排列方式就能得到不一样的效果，可以收缩项目达到想要大小尺寸。
从中学到了如何去计算项目尺寸。

flex 布局概述

flex 是什么

flex 解决了什么问题

项目的布局方向是什么

flex 布局中常用术语有哪些(三个二)

1.flex 容器与项目

1.1. display属性

1.2. flex 容器与项目特征

1.3. 创建容器与项目：

效果图：

代码：

2.flex 容器主轴方向

2.1. flex-direction属性

2.2主轴方向演练效果图：

项目从右往左排列：

项目垂直从小到大排列：

项目垂直从大到小排列：

2.3主轴方向演练代码：

3.flex 容器主轴项目换行

3.1. flex-wrap属性

3.2主轴方向演练效果图：

主轴上的项目不允许换行：

主轴上的项目允许换行：

主轴上的项目项目反向排列：

3.3主轴方向演练代码：

4.flex 容器主轴与项目换行简写

4.1. flex-flow属性

4.2 容器主轴与项目换行简写代码：

5.flex 容器主轴项目对齐

5.1. justify-content属性

5.2. flex 容器主轴项目对齐演练效果图：

主轴起始线对齐:

终止线对齐:

居中对齐:

两端对齐:

分散对齐:

平均对齐:

5.3. flex 容器主轴项目对齐演练代码：

6.flex 容器交叉轴项目对齐

6.1. align-items属性

5.2. flex 容器交叉轴项目对齐演练效果图：

默认与交叉轴起始线对齐:

与交叉轴终止线对齐:

与交叉轴中间线居中对齐:

5.3. flex 容器交叉轴项目对齐演练代码：

7.flex 多行容器交叉轴项目对齐

7.1. align-content属性

5.2. flex 多行容器交叉轴项目对齐演练效果图：

自动拉伸 默认:

所有项目与交叉轴起始线(顶部)对齐:

所有项目与交叉轴终止线对齐:

所有项目与交叉轴中间线对齐: 居中对齐:

两端对齐: 剩余空间在头尾项目之外的项目间平均分配:

分散对齐: 剩余空间在每个项目二侧平均分配:

平均对齐: 剩余空间在每个项目之间平均分配:

5.2. flex 容器交叉轴项目对齐演练代码：

8.flex 项目交叉轴单独对齐

8.1. align-self属性

8.2. flex 项目交叉轴单独对齐演练效果图：

分组的第一个子元素:

分组后的任意位置第二位:

分组后的任意位置第三位:

分组最后的一位:

8.3. flex 项目交叉轴单独对齐演练代码：

9.flex 项目放大因子

9.1. flex-grow属性

9.2 flex 项目放大因子演练代码：

10.flex 项目计算尺寸

10.1. flex-basis属性

10.2 flex 项目计算尺寸演练代码：

11.flex 项目收缩因子

11.1. flex-shrink属性

11.2flex 项目收缩因子演练代码：

12.flex 项目缩放的简写

12.1. flex属性

12.2 三值语法

12.3 双值语法

12.4 单值语法

12.5 flex 项目缩放的简写演练代码：

学习总结：

1.1. `display`属性

2.1. `flex-direction`属性

3.1. `flex-wrap`属性

4.1. `flex-flow`属性

5.1. `justify-content`属性

6.1. `align-items`属性

7.1. `align-content`属性

自动拉伸默认:

8.1. `align-self`属性

9.1. `flex-grow`属性

10.1. `flex-basis`属性

11.1. `flex-shrink`属性

12.1. `flex`属性