文章学习于阮一峰老师 flex 语法篇
一、flex 布局是什么？
Flex 布局是 flexible box 的简称，弹性盒子布局，用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局
.box{
display: flex;
}
行内元素也可以使用 Flex 布局
.box{
display: inline-flex;
}
Webkit 内核的浏览器 ,必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意：
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
二、容器的属性
采用flex布局的元素，称之为”flex容器“，这里简称为容器；子元素即容器成员称之为”flex项目“，简称为项目。
注意：主轴的方向受flex-direction属性影响，不一定是水平方向从左到右（默认如此）
有六个属性：
flex-direction: 决定容器主轴方向，即项目的排列方向
flex-wrap: 决定项目在主轴上排列不下如何换行
flex-flow: flex-direction + flex-warp的简写形式
justify-content: 项目的主轴上的对齐方式
align-items: 项目的交叉轴上对齐方式
align-content: 项目为多行时的交叉轴上填充方式
2.1 flex-direction
- row (默认值)：设置主轴为水平方向，项目从左到右排列
- row-reverse：设置主轴为水平方向，项目从右到左排列
- column：设置主轴为垂直方向，项目从上到下排列
- column-reverse：设置主轴为垂直方向，项目从下到上排列
2.2 flex-wrap
-
nowrap（默认值）：不换行，放不下会按比例压缩
-
wrap：换行，换行后接在下方，如下
1 2 3 4
5 6 7
-
wrap-reverse：换行，换行后接在上方，如下
5 6 7
1 2 3 4
2.3 flex-flow
flex-direction 和 flex-wrap 的结合体，用法如下：
.box {
flex-flow: row nowrap; // 默认值为 row nowrap
}
2.4 justify-content
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中对齐
- space-between：两端对齐，项目之间的间隔相等
- space-around：项目两侧的间隔相等（易得项目之间的间隔是项目和边框的间隔的两倍）
2.5 align-items
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下
- flex-start：上端对齐
- flex-end：下端对齐
- center：居中对齐
- baseline：项目第一行的文字基线对齐
- stretch（默认值）：拉伸（未设置高度的项目将拉伸铺满整个盒子高度），类似于等分了容器
2.6 align-content
当项目在容器里为多行的时候，该属性才起作用
它可能取6个值。具体的分布与交叉轴的方向有关，下面假设交叉轴从上到下
- flex-start：上端对齐
- flex-end：下端对齐
- center：居中对齐
- space-between：两端对齐，项目之间的间隔相等
- space-around：项目两侧的间隔相等（易得项目之间的间隔是项目和边框的间隔的两倍）
- stretch（默认值）：拉伸，类似于每一行等分了容器
三、项目属性
项目属性有六个，分别是
-
order：设置排序权重，默认为0，越小越靠前，相等权重按文档顺序 -
flex-grow：拓展权重，默认值为0，如果在主轴上有剩余空间，则按照设置的权重比例追加宽度例如：容器宽度500，项目1宽度100，项目2宽度200，则剩余空间300，如项目1、2的权重比为1:2，则项目1宽度拓展为100+100=200，项目2宽度拓展为200+200=400）
-
flex-shrink：缩小权重，默认值为1，当空间不足时会按权重比例缩小例如：容器宽度600，项目1宽度500，项目2宽度1000，明显空间不足，如项目1、2的权重比为2:1，则：
应当缩小的总空间为 (500+1000)-600=900
加权和为：500*2+1000*1=2000
项目应当缩小的宽度为：[应当缩小的总空间]*([缩小权重 flex-shrink]*[项目自身宽度]/[加权和])
项目1的宽度缩小为：500-[900*(2*500/2000)]=500-450=50
项目2的宽度缩小为：1000-[900*(1*1000/2000)]=1000-450=550
-
flex-basis：项目基础空间，默认值auto，定义了项目占主轴的空间（拓展或缩小前的基础空间） -
flex：flex-grow、flex-shrink、flex-basis 三者的简写，默认值为 0 1 auto -
align-self：项目自己的对齐方式，默认值auto设置为auto时和容器的align-items的设置一样（继承），除了auto，可设置的属性值和align-items一样，flex-start | flex-end | center | baseline | stretch，效果也是
