一、起步
1、flex介绍
使用flex弹性布局的元素，称为flex 容器（flex-container）。它的所有子元素自动成为容器成员，称为 flex 项目（flex-item）。
即需要分为两个部分，一为flex-container，另一部分为flex-item，flex-item包含于flex-container中，如下面代码中，类名为“container”的div块为flex-container，div中所包含的类名为“item1”、“item2”、“item3”的div块均为flex-item。
注意：设为 flex布局以后，子元素的float、clear和vertical-align属性将失效。
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
.container {
width: 500px;
height: 400px;
background-color: orange;
margin: 0 auto;
}
.item {
width: 100px;
height: 100px;
color: #fff;
line-height: 100px;
text-align: center;
}
.item1 {
background-color: #f00;
}
.item2 {
background-color: #0f0;
}
.item3 {
background-color: #00f;
}
二、flex主轴概念
（1）弹性布局开启后flex-container元素默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
（2）主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
（3）交叉轴的开始位置叫做cross start，结束位置叫做cross end。
（4）flex-item元素默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
二、开启flex布局
对flex-container以及其中的flex-item开启flex布局，需在flex-container做如下设置：
.container{
width: 500px;
height: 400px;
background-color: orange;
margin: 0 auto;
display:flex || inline-flex;
// 开启flex布局，当display为flex，此容器为块级元素，当为inline-flex时为行内元素
//Webkit 内核的浏览器，必须加上-webkit前缀，即-webkit-flex。
}
//其他item属性暂时不变
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
<span>我是行内元素</span>
分布如下图所示：
三、flex-container属性
flex-container可设置如下6种属性：
（1）flex-direction：控制主轴放方向，默认属性为row
（2）justify-content：决定了flex-item与main axis上的对齐方式
（3）align-items：决定了flex-item与cross axis上的对齐方式
（4）flex-wrap：决定了flex container是单行和多行
（5）flex-flow为flex-direction和flex-wrap的缩写属性
（6）align-content决定了多行flex-item与cross axis上的对齐方式，用法与justify-content相似
1、flex-direction有如下4个选项：
（1）row：flex-direction控制主轴方向，默认属性为row。
（2）row-revers：翻转主轴方向。
（3）column：主轴方向改为竖直方向。
（4）column-reverse：翻转此时的主轴方向。
.container {
flex-direction:row || row-reverse|| column || column-reverse || column-reverse;
// flex-direction：控制主轴方向，默认属性为row
// row-revers：翻转主轴方向
// column：主轴方向改为竖直方向
// column-reverse：翻转此时的主轴方向
}
示例如下：
2、justify-content：决定了flex-item与main axis上的对齐方式
（1）flex-start（默认值）：与main start对齐
（2）flex-end：与main end对齐
（3）center：居中对齐
（4）space-between： flex-item之间距离相等，与main start main end两端对齐
（5）space-around： flex-item之间距离相等，flex-item与main start、main end之间的距离等于flex-item之间的距离
（6）space-evenly： flex-item之间距离相等，flex-item与main start、main end之间的距离是flex-item之间的距离的一半
.container {
justify-content: flex-start || flex-end || center || space-between || space-around
// flex-start（默认值）：与main start对齐
// flex-end：与main end对齐
// center：居中对齐
// space-between： flex-item之间距离相等，与main start、main end两端对齐
// space-around： flex-item之间距离相等，flex-item与main start、main end之间的距离等于flex-item之间的距离
// space-evenly： flex-item之间距离相等，flex-item与main start、main end之间的距离是flex-item之间的距离的一半
}
示例如下：
3、align-items：决定了flex-item与cross axis上的对齐方式
（1）normal:与stretch效果一样
（2）stretch：当flex-item在cross axi放下的size为auto时，会自动拉伸填充至flex container
（3）flex-start（默认值）：items在cross start对齐
（4）flex-end：在cross end对齐
（5）center：居住对齐
（6）baseline：基准线对齐
.container {
align-items: normal || stretch || flex-start || flex-end || center || baseline
// normal: 与stretch效果一样
// stretch：当flex-item在cross axi放下的size为auto时，会自动拉伸填充至flex container
// flex-start（默认值）：items在cross start对齐
// flex-end：在cross end对齐
// center：居住对齐
// baseline：基准线对齐
}
示例如下：
4、flex-wrap：决定了flex container是单行和多行
（1）nowrap（默认值）：单行
（2）wrap：多行，当第一行最后剩的距离占不下时，会按cross方向等分的flex container部分对齐分配第二行
（3）wrap-reverse：多行（对比wrap，cross start与cross end相反）
.container {
flex-wrap: nowrap || wrap || wrap-reverse
// nowrap（默认值）：单行
// wrap：多行，当第一行最后剩的距离占不下时，会按cross方向等分的flex container部分对齐分配第二行
// wrap-reverse：多行（对比wrap，cross start与cross end相反）
}
5、flex-flow：为flex-direction和flex-wrap的缩写属性
例如：
.container {
flex-flow：column wrap
}
6、align-content：决定了多行flex-item与cross axis上的对齐方式，用法与justify-content相似
（1）stretch（默认值）：与align-items的stretch效果一样
（2）flex-start：与cross start对齐
（3）flex-start：与cross end对齐
（4）center居住对齐
（5）space-between： flex-item之间距离相等，与cross start、cross end两端对齐
（6）space-around： flex-item之间距离相等，flex-item与cross start、cross end之间的距离等于flex-item之间的距离
（7）space-evenly： flex-item之间距离相等，flex-item与cross start、cross end之间的距离是flex-item之间的距离的一半
.container {
align-content：stretch || flex-start || flex-end || center || space-between || space-around || space-evenly
// stretch（默认值）：与align-items的stretch效果一样
//flex-start：与cross start对齐
//flex-end：与cross end对齐
//center居住对齐
//space-between： flex-item之间距离相等，与cross start、cross end两端对齐
//space-around： flex-item之间距离相等，flex-item与cross start、cross end之间的距离等于flex-item之间的距离
//space-evenly： flex-item之间距离相等，flex-item与cross start、cross end之间的距离是flex-item之间的距离的一半
}
示例如下：
四、flex-item中的属性
flex-item共用6个设置属性，如下所示：
（1）order：定义项目的排列顺序。数值越小，排列越靠前，默认为0 。
（2）align-self：覆盖flex:-container设置的align-items。
（3）flex-grow：决定了flex-item放大比例，默认为0，即如果存在剩余空间，也不放大。
（4）flex-shrink决定了flex-item缩小比例，默认为1，即如果空间不足，该项目将缩小。
（5）flex-basis属性定义了在分配多余空间之前，flex-item占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即flex-item的本来大小。
（6）flex是flex-grow || flex-shrink || flex-basis的简写，flex属性可以指定1个，2个，3个值。
1、order：定义项目的排列顺序
（1）可以设置任意整数（正整数、负整数、0），值越小越排在前面
（2）默认值是0
示例如下：
2、align-self：覆盖flex-container设置的align-items。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
示例：
3、flex-grow：可以设置任意非负数字（正小数、正整数、0），默认值是0
（1）当flex-container在main axis有剩余size时才会生效
（2） 如果所有flex-item的flex-grow总和sum超过1，每个flex-item扩展的size为：flex-container的剩余size * flex-grow/sum
（3）如果所有flex-item的flex-grow总和sum不超过1，每个flex-item扩展的size为：flex-container的剩余size * flex-grow
（4）flex-item扩展后的所有size不能超过max-width
示例:
4、flex-shrink可：以设置任意非负数字（正小数、正整数、0），默认值是1
（1）当flex-item 在main axis上超过flex-container的size时才会生效
（2）如果所有flex-item的flex-shrink总和sum超过1，每个flex-item收缩的size为：flex-item超出flex-container的size * （收缩比例 / 所有flex-item收缩比例之和）
（3）如果所有flex-item的flex-shrink总和sum不超过1，每个flex-item收缩的size为：每个flex-item收缩的size为：flex-item超出flex-container的size * 所有flex-item收缩比例之和 * （收缩比例/所有flex-item收缩比例之和）
i. 收缩比例=flex-shrink * flex-item的base-size
ii. base-size就是flex-item放入flex-container之前的size
iii. flex items收缩后的所有size不能小于min-width
示例：
5、flex-basis：用来设置flex-item在main axis方向上的size，
（1）设置为auto为默认值，即为原来的大小、
（2）设置具体的宽度数值（100px)，即可改变flex-item的size
决定flex-item最终size的因素，从优先级高到底
i.max-width/max-height/min-width/min-height
ii.flex-basis
iii.width/height
iiii.内容本身的size
6、flex：是flex-grow || flex-shrink || flex-basis的简写，flex属性可以指定1个，2个，3个值
（1）单值语法：值必须为以下其中之一：
一个无单位数（<number>):它会被当做flex-grow的值
一个有效的宽度（width）值：它会被当做flex-basis的值
关键字none，auto活initial
（2）双值语法：第一个值必须为一个无单位数，并且会被当做flex-grow的值
第二个值必须为以下之一：
一个无单位数：它会被当做flex-shrink的值
一个有效的宽度值：它会被当做flex-basis的值
（3）三值语法：
第一个值必须为无单位数，并且会被当做flex-grow的值
第二个值必须为无单位数，并且会被当做flex-shrink的值
第二个值必须为一个有效的宽度值数，并且会被当做flex-basis的值
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
常用的示例：
