1、开启flex布局
display: flex;
2、允许自动换行
flex-wrap: wrap;
3、设置主轴对齐方式
justify-content: space-between;
4、传统布局和flex布局对比
4.1 传统布局:
4.1.1 兼容性好
4.1.2 布局繁琐
4.1.3局限性，不能在移动端很好的布局
4.2 flex布局:
4.2.1 操作方便，布局极其简单，移动端使用比较广泛
4.2.2 pc端浏览器支持情况比较差
4.2.3 IE11或更低版本不支持flex或仅支持部分
5、布局建议
5.1 如果是pc端页面布局，还是采用传统方式 display+float+position
5.2 如果是移动端或者是不考虑兼容的pc则采用flex
5.3 给ul设置display:flex,那么ul就是flex容器, ul里面的"子元素"就是flex项目
5.4 因为flex容器有flex容器的属性,flex项目有flex项目的属性
6、容器属性
6.1 以下6个属性是对容器(也就是父元素)设置的
6.1.1 flex-direction：设置主轴的方向
6.1.2 justify-content：设置主轴上的子元素排列方式
6.1.3 flex-wrap：设置子元素是否换行
6.1.4 align-content：设置侧轴上的子元素的排列方式（多行）
6.1.5 align-items：设置侧轴上的子元素排列方式（单行）
6.1.6 flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
6.2 flex布局子项(项目)属性
6.2.1 flex-grow属性定义项目的放大比例
6.2.2 flex-shrink属性定义了项目的缩小比例
6.2.3 flex-basis属性定义了剩余空间分配之前元素的默认大小
6.2.4 flex子项目占的份数:
6.2.4.1 align-self控制子项自己在侧轴的排列方式
6.2.4.2 order属性定义子项的排列顺序（前后顺序）
6.3 注意:
开启flex以后,会出现两个轴,一个是主轴,一个是侧轴, 我们的flex项目会沿着主轴方向排列 主轴默认方向是从左到右, 侧轴默认方向是从上到下 主轴跟侧轴始终是垂直关系
7、flex布局原理
7.1 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
7.2 注意:
当我们为父盒子设为 flex 布局以后，子元素的 "float、clear 和 vertical-align" 属性将失效。
7.3 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
7.4 采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。
8、例子
8.1 开启弹性盒子以后, 项目会沿着主轴方向排列
8.1.1 /* 默认主轴方向是从左到右
/* 通过容器属性flex-direction改变主轴方向
8.1.2 /* row取值就是默认取值,主轴方向从左到右
flex-direction: row;
8.1.3 /* row-reverse主轴方向从右到左
flex-direction: row-reverse;
8.1.4 /* column主轴方向从上到下
flex-direction: column;
8.1.5 /* column-reverse主轴方向从下到上
flex-direction: column-reverse;
8.2 /* justify-content设置项目在主轴方向上排列方式:
/* 取值:
8.2.1 /* center项目排列在主轴中间
justify-content: center;
8.2.2 /* flex-start项目排列在主轴的开始位置
justify-content: flex-start;
8.2.3 /* flex-end项目排列在主轴的结束位置
justify-content: flex-end;
8.2.4 /* space-between两端对齐
justify-content: space-between;
8.2.5 /* space-around项目左右间隔相同
justify-content: space-around;
8.2.6 /* space-evenly平分空白距离
justify-content: space-evenly;
8.3 /* 默认情况下,如果flex项目的总宽度超过flex容器,flex容器会强制这些flex项目一行显示,所以会对flex项目进行压缩
8.3.1 /* 通过flex-wrap属性可以设置flex项目是否允许换行
/* 取值: nowrap不换行(默认取值) wrap换行
/* flex-wrap: nowrap;
/*flex-wrap: wrap;
8.4 /* align-items属性是设置单行项目,在侧轴方向的对齐方式
/* 取值:
8.4.1/* stretch拉伸,默认取值
/* align-items: stretch;
8.4.2 /* center侧轴的中部
/*align-items: center;
8.4.3 /* flex-start侧轴的开始
/* align-items: flex-start;
8.4.4 /* flext-end侧轴的结束
/* align-items: flex-end;
8.5 区分
8.5.1 /* align-items设置"单行项目"在侧轴方向的对齐方式
8.5.2 /* align-content设置"多行项目"在侧轴方向的对齐方式
8.5.3 /* align-self设置"当前某个"项目在侧轴的对齐方式
8.6 /* order属性定义项目的排列顺序
8.6.1 /* order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局 */
8.6.2 /* 取值数值,不带px单位; 数值越小，排列越靠前，默认为0。
8.7 多行对齐(多行内容在交叉轴上的对齐方式)
8.7.1 /* 注意: 需要设置flex-wrap:wrap才可能出现多行项目(取值同单行对齐)
/* align-content: flex-end;
/* align-content: flex-start;
/* align-content: center;
/* align-content: space-between;
/* align-content: space-around;
/* align-content: space-evenly;
/* align-content: stretch;
8.8 /* flex-flow可以同时设置flex-direction以及flex-wrap属性, 没有顺序要求, 被省略的属性值将使用默认值
8.8.1 /* flex-flow: row-reverse wrap;
8.8.2 /* flex-grow定义项目的扩大比例, 当flex容器有剩余宽度的时候,定义剩余的宽度如何分配
8.8.3 /* flex-grow取值是数值,不带CSS单位, 默认为0; 0表示不扩大
8.9 /* flex-shrink, 当flex容器宽度不够的时候,项目的缩小比例
8.9.1 /* flex-shrink取值是数值,不带css单位, 默认1;
8.9.2 /* flex-basis属性定义了剩余空间分配之前元素的默认大小，它可以是长度（例如20%, 40px, 5em等）或关键字auto。它的默认值为auto，即"项目的本来大小"
8.9.3 /* 百分比是相对flex容器的
8.10 /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写属性，默认值为0 1 auto。
8.10.1 语法:
/* flex: flex-grow flex-shrink flex-basis;
8.10.1 /* flex: 放大比例 缩小比例 项目默认大小
8.10.2 /* 该属性有两个快捷值：
/* 1. flex: auto(等同于flex: 1 1 auto)
/* 2. flex: none(等用于flex: 0 0 auto)
8.10.3 /* 另外,可以使用一个，两个或三个值来指定 flex属性, 规则如下:
8.10.3.1 /* 单值语法:
值必须为以下其中之一：
一个无单位数 (): 它会被当作 flex: 1 0; 的值被假定为 1，然后 的值被假定为0。
一个有效的 宽度 (width) 值：它会被当作 的值。
关键字none，auto或initial.
8.10.3.2 /* 双值语法:
第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一：
一个无单位数：它会被当作 的值。
一个有效的宽度值：它会被当作 的值。
8.10.3.3 /* 三值语法：
第一个值必须为一个无单位数，并且它会被当作 的值。
第二个值必须为一个无单位数，并且它会被当作 的值。
第三个值必须为一个有效的宽度值，并且它会被当作的值。
8.10.4 /* flex: 3;
/* 等同于
flex-grow: 3;
flex-shrink: 1;
flex-basis: 0%;
8.10.5 /*flex: 2;
/* 等同于
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
8.10.6 /*flex: 1;
/* 等同于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
8.10.7 /*flex: 0 1 auto;
/* 等同于
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
