2000元阿里云代金券免费领取，2核4G云服务器仅664元/3年，新老用户都有优惠，立即抢购>>>
阿里云采购季（云主机223元/3年）活动入口：请点击进入>>>，
阿里云学生服务器（9.5元/月）购买入口：请点击进入>>>，
什么是flex
一、（了解）Flexbox布局功能主要具有以下几点：
1：屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
2：可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
3：可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4：可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5：可以控制元素在页面上的布局方向；
6：可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
二、创建Flex容器：
第一步需要将父盒子设置为 display:flex; flex容器
注意: 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
三、基本概念：
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的纵轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
四、容器属性：
以下6个属性设置在容器上。
1、flex-direction 设置项目的排列方向
2、flex-wrap 设置如何换行
3、flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4、justify-content 定义项目在主轴上的对齐方式
5、align-items 定义项目在纵轴上如何对齐
6、align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
1-1、flex-direction 设置项目的排列方向
row (默认) 水平方向起点在左边
row-reverse 水平方向起点在右边
column 竖直方向 起点在上方
column-reverse 竖直方向 起点在下方
2-1、flex-wrap 设置如何换行
nowrap（默认） 不换行
wrap 换行
wrap-reverse 换行，第一行在下方
3-1、flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4-1、justify-content 定义项目在主轴上的对齐方式
flex-start（默认值） 左对齐
flex-end 右对齐
center 居中对齐
space-between 两端对齐 项目之间的间隔相等
space-around 每个项目两侧的间隔相等
5-1、align-items 定义项目在纵轴上如何对齐
stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start 纵轴的起点对齐。
flex-end 纵轴的终点对齐。
center 纵轴的中点对齐。
baseline 项目的第一行文字的基线对齐。
6-1、align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start 与纵轴的起点对齐。
flex-end 与纵轴的终点对齐。
center 与纵轴的中点对齐。
space-between 与纵轴两端对齐，轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值） 轴线占满整个交叉轴。
五、项目属性
以下6个属性设置在项目上。
1、order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
2、flex-grow 定义项目的放大比例，默认为0，即如果有剩余空间，也不放大。
3、flex-shrink 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4、flex-basis
5、flex
6、align-self
1-1、order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
2-1、flex-grow 定义项目的放大比例，默认为0，即如果有剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3-1、flex-shrink 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，
其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
