一Flexible Box Layout：
弹性赫模型布局：提供一种更加高效的方式来对 容器中的条目进行布局、对齐和分配空间
二、盒模型的概念
1、容器：采用flex 布局的元素都称为容器 Flex Container
2、项目：容器内的所有子元素自动成为容器成员，称为项目 Flex Item
3、两根轴：
3-1、main axis（主轴）：
容器中水平的称为主轴
main start主轴的开始位置
main end主轴的结束位置
3-2、cross axis（交叉轴）：
容器中垂直的称为交叉轴。
cross start交叉轴的开始位置。
cross end交叉轴的结束位置。
4、项目默认按照主轴排列：
4-1：main size单个项目占据的主轴空间
4-2：cross size单个项目占据的交叉轴空间
三、使用
1、任何容器都可以指定为flex布局：
1-1：.box { display: flex; }
1-2：flex布局之后，子元素成为内联块元素
1-3：注意：display: -webkit-flex;
2、行内元素也可以使用flex布局：.box section { display: inline-flex; }
3、注意设置后，float /clear / vertical-align将失效
四、容器的样式
/*给容器标签设置flex属性，则该容器中项目的布局就会按照flex的方式布局*/
/*如果父标签成了flex的容器，则子标签会有内联块样式的相关属性；且子标签所设置的float\clear\vertical-align属性会失效*/
1、 flex-direction：决定主轴的方向（项目的排列方向）
/*通过修改主轴的方向，进而修改项目的布局顺序*/
flex-derection: row | row-reverse | column | column-reverse;
1-1值： row（默认值） 主轴为水平方向（左到右）
row-recerse 主轴为水平方向（右到左）
column 主轴为垂直方向（上到下）
column-reverse 主轴为垂直方向（下到上）
2、 flex-wrap：默认情况下，项目都排在一条线（轴线），如果一条轴线排不下，flex-wrap决定该如何换行。
指定项目是否换行 flex-wrap: nowrap | wrap| wrap-reverse
1-1值： no-wrap（默认）不换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方
3、 flex-flow: flex-flow属性是flex-direction属 性和flex-wrap的简写形式
默认值如 flex-flow:wrap row
4、 justify-content：决定项目在主轴上的对齐方式（以下属性默认从左向右为例）
justify-content: flex-start | flex-end | center |space-between | space-around;
1-1值： flex-start：研左侧对齐
flex-end：沿右侧对齐
center：沿中间对齐
space-around：均匀分布（项目两侧留白相等）
space-between：项目靠两侧对齐
5、align-items：决定项目沿交叉的对齐方式（以默认从上到下为例）。
align-items:flex-start | center | flex-end | stretch | baseline
5-1值： flex-start：沿上方对齐
center：沿中间对齐
flex-end：沿下方对齐
baseline：沿文字基线对齐
stretch：默认值 填满整个交叉轴，将占满整个容器的高度
6、 align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch：默认值
6-1值：flex-start：沿交叉轴起点对齐
flex-end：沿交叉轴结束点对齐
center：沿交叉轴中点对齐
space-between：沿交叉轴两侧对齐
space-around：沿交叉轴
stretch (默认值)轴线占满整个交叉轴
align-items和align-content的异同
相同点：都是设置项目在交叉轴方向上的对齐方式
不同点：
在只有单根轴线（项目不换行）时，使用align-items设置对齐方式
在有多跟轴线（项目换行）时，使用align-content把多跟交叉轴合并为一根，每一行上的项目都参照同一根交叉轴进行对齐。
如果在多跟轴线情况下使用align-items来设置交叉轴方向上的对齐方式，每一行的项目会参照自己这一行上的交叉轴进行对齐（效果：行与行之间有空隙）
五、项目的属性
1、 flex-grow：[number] 定义项目的放大比例
number: 数值 默认为0 不放大，值越大，放大比率越大
默认为0，即如果存在剩余空间，也不放大
如果所有的flex-grow属性都为1，则他们将等分剩余空间如果一个项目的flex-grow属性为 2，其它项目都为1，则前者占据的剩余空间将⽐其它项多一倍
2、flex-shrink：[number] 定义了项目的缩小比例
number： 数值 默认1 自动缩小，值越大，缩小比率越大
默认为1即如果空间不足，该项目将缩小
如果所有的项目flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flexshrink属性为0，则其它项目都为1，则空间不足时，前者不缩小。
负值对该属性无效
3、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间
flex-basis: auto | pixel | 百分比
默认值为auto，即项目的本来大小
auto ： 使用项目本身大小
pixel ： 使用指定的像素值
percent ： 使用指定的百分比
100% 当wrap 时，项目会占容器的整个宽度
当nowrap 时， 项目会占容器主轴剩余的宽度（无他放大无效）
4、flex flex: flex-grow | flex-shrink | flex-basis
如：flex:1 1 100%
5、align-self：属性允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性
flex-start | center | flex-end | stretch | baseline 决定项目自身的对齐方式（相对于交叉轴）
默认值auto表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
该属性有6个值，除了auto，其它都与align-items属性完全一致
6、 order：定义项目的排列顺序 数值越小，排列越靠前 默认为0
order: [number] 决定项目的顺序
网友评论