1.flex布局

flex布局弹性布局，在移动端使用很多，在pc端应用也越来越多
开启了flex布局的元素叫flex container
flex container里的直接子元素叫flex container items
如何开启flex布局？
css中设置display:flex或display:inline-flex就可以了
//flex是块级元素
//inline-flex是行内元素

2.flex的相关属性

应用在flex container上的css属性

flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content

应用在flex items上的属性

flex
flex-grow
flex-basis
flex-shrink
order
align-self

3.flex-container的一些属性

flex-direction 决定主轴的方向
默认情况下，flex items都是沿着main axis(主轴)从main start开始往main end方向排布

flex-direction: row;  //从左向右排布(主轴从左到右)
flex-direction: row-reverse; //从右向左排布（主轴从右到左)
flex-direction: column; //从上到下排布(主轴从上到下)
flex-direction: column-reverse; //从下到上排布(主轴从下到下)

justify-content
此属性决定了flex items在主轴上的对齐方式

justify-content: flex-start //也是默认值，默认与main start位置对齐
justify-content: flex-end //main end位置对齐
justify-content: center //居中对齐
justify-content: space-between //左右元素紧贴边，中间元素居中对齐，并且平分空白区域
justify-content: space-evenly //所有元素都平分空白区域，并且居中
justify-content: space-around //左右元素距离边的空白小一些，其它都平分空白区域，左右元素的空白距离其实正好是中间元素空白区域的一半

align-items决定了flex items在cross axis（交叉轴）上的对齐方式（竖直方向)

align-items:normal; 在弹性布局中，效果跟stretch一样
align-items:stretch:当flex items在cross axis方向的size为auto时，flex items的高度会拉伸到填充flex container,前提是flex items没有设置高度值
align-items:flex-start，当flex items设置的有高度时，对齐方式是顶部对齐。
align-items:flex-end，当flex items设置有高度时，对齐方式是底部对齐
align-items:center; 在交叉轴的中心点对齐
align-items:baseline; 与基准线对齐

默认情况display:flex下（flex-wrap:nowrap 不换行）中所有的flex items都会在同一行显示，显示不下时会进行收缩。

设置flex-wrap:wrap;后当在同一行显示不下时，会换行显示。flex-wrap:wrap-reverse;反转显示，用得比较少

flex-flow是flex-direction || flex-wrap的简写
可以省略，顺序任意
例子：flex-flow: row-reverse wrap;从右向左排布，当显示不下时，换行

align-content决定了多行flex items在cross axis上的对齐方式

align-content:stretch; //有高度时拉伸不管用 
align-content:flex-start; //交叉轴上依次排布
align-content:flex-end; //交叉轴从底部依次向上排布
align-content:center; //居中
align-content:space-betweend; //上下元素之间有空白
align-content:space-around; //上下元素之间有空白是中间分隔空间的一半
align-content:space-evenly; //所有元素之间有空白平均

4.flex-items的一些属性

order决定了items的排布顺序
order:16 (正数，负数，0)值越小越排列在前面
默认值是0

align-self会覆盖父元素flex-container设置的align-items属性
auto默认值，从flex container的align-items设置
stretch、flex-start、flex-end、center、baseline效果跟align-items一致

flex-grow拉伸
flex-grow:1
flex-grow:1
flex-grow:1
效果是三个元素平均拉伸
如果所有flex items的flex-grow总和超过1，每个flex item扩展的size为flex container剩余的空间size * flex-grow / sum

如果所有的flex items的flex-grow总和不超过1，每个flex item扩展的size为
flex container的 剩余size * flex-grow

flex-shrink决定了flex items如何收缩
可以设置任意的非负数字（正数、负数、0）默认值1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效

如果所有flex items的flex-shrink总和超过1，每个flex item的收缩size为
flex items超出flex container的size * 收缩比例/所有flex items的收缩比例之和

如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size为
flex items超出flex container的size * sum * 收缩比例/所有flex items的收缩比例之和
收缩比例=flex-shrink * flex item的base size
base-size就是flex item放入flex container之前的size

flex-basis用来设置flex items在main axis方向上的base size
auto(默认值)、具体的宽度数值(100px)

决定flex items最终base size的因素，从优先级从高到低

max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的size

flex属性（了解）
flex是flex-grow || flex-shrink|| flex-basis的简写
可以指定1、2、3个值

单值的时候，值必须是以下其中之一
一个无单位数，它会被当作flex-grow的值
一个有效的宽度值，它会被当作flex-basis的值
关键字 none auto 或 initial
双值的时候
第一个值必须为一个无单位数，并且它会被当作flex-grow的值
第二个值必须为以下之一
一个无单位数，它会被当作flex-shrink的值
一个有效的宽度值，它会被当作flex-basis的值

三个值的时候
第一个值必须无单位的数，并且它会被当作flex-grow的值
第二个值必须无单位的数，并且它会被当作flex-shrink的值
第三个值必须为一个有效的宽度值，并且它会被当作flex-basis的值