目前在移动端用的最多，pc端也使用的越来越多
两个重要的概念：
- 开启了flex布局的元素叫 flex container
- flex container 里面的直接子元素叫做 flex items 最后会有开启flex布局和flex布局模型(主轴与交叉轴)的叙述
flex container上的css属性
lex-flow
flex-flow是flex-direction || flex-wrap的简写
可以省略，顺序任意
flex-direction （决定主轴方向）
flex item默认都是沿着main start 到 main end 方向排布
- row从左到右； row-reverse从右到左(reverse翻转反向)；
- Colum从上到下; coulum-reverse从下到上(格式：
flex-direction: colum)
flex-wrap （决定单双行）
flex-warp决定了flex container是单行还是多行
默认情况下，所有的flex items都会在同一行显示
-
nowrap（默认）：单行（不换行）
-
wrap：多行 （换行）
-
wrap-reverse：多行（对比wrap，cross start与cross end相反）（相当于反转，用的很少）
justify-content （决定主轴上flex-items如何排布）
决定了flex items在main axis上的对齐方式(格式：justify-content: flex-start)
-
flex-start（默认值）：与main start对齐；flex-end：与main end对齐；
-
center: 居中对齐（
有这个之后，可代替margi：0 auto；text-align：center） -
space-between：flex items之间的距离相等；与main start、main end两段对齐
-
space-evenly：flex items之间的距离相等；flex items与main start、main end之间的距离等于 flex items 之间的距离（等分）
-
（常用）space-around：flex items之间的距离相等；flex items与main start、main end之间的距离是flex items之间的距离的一半
align-items （决定flex-items在交叉轴上的对齐方式）
align-items决定了flex items在cross axis上的对齐方式
-
normal：在弹性布局中，效果和stretch一样（拉伸前提，没有设置高度）
-
stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
-
flex-start：与cross start对齐
-
flex-end：与cross end对齐
-
center：居中对齐
-
baseline：与基准线对齐
align-content
align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
-
stretch（默认值）：与align-items的stretch类似
-
flex-start：与cross start对齐
-
flex-end：uicross end对齐
-
center：居中对齐
-
space-between：flex items之间的距离相等，与cross start、cross end两段对齐
-
space-around：flex items之间的距离相等；flex items与cross start、cross end之间的距离是flex items之间距离的一半
-
space-evenly：flex items之间的 距离相等；flex items与cross start、cross end之间的距离 等于 flexitems 之间的距离
应用在flex items上的css属性
order （决定了flex-items的排布顺序）
-
可以设置任意整数（正整数、负整数、0），
值越小就越排在前面用的比较少 -
默认值是0
align-self （可覆盖align-items）
-
flex items可以通过align-self覆盖flex container设置的align-items
-
stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
flex-grow （决定了flex items如何扩展）
-
可以设置任意非负数字（正小数、正整数、0），默认值是0
-
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
如果所有flex items 的flex-grow总和sum超过1，每个flex item扩展的size为
- flex container的剩余size*flex-grow/sum
如果所有flex items的flex-grow总和不超过1，每个flex items扩展的size为
- flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-width\max-height
（默认加上收缩）在没有设置flex-wrap: wrap;时，当内容超过盒子时会收缩（每个内容盒子均等收缩多余的量）
flex-shrink （决定了flex items如何收缩）
可以设置任意非负数字（正小数、正整数、0），默认值是1
当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会有效
如果所有flex items的flex-shrink总和超过1，每个flex items收缩的size为 flex items超出flex container的size收缩比例/所有flex items的收缩比例之和
如果所有flex items的flex-shrink总和sun不超过1，每个flex item收缩的size为 flex items 超出flex container的sizesum收缩比例/所有flex items的收缩比例之和
收缩比例=flex-shrink*flex items的base size
base size就是flex items放入flex container之前的size
flex items收缩后的最终size不能小于min-width/min-height
flex-basis （决定主轴上面item大小）
flex-basis 用来设置flex items在main axis方向上的base size
auto（默认值，宽度多少就是多少）、具体的宽度数值（100px） 当同时设置了宽高和flex-basis，则flex-bases管用 决定flex items最终base size的因素，从优先级高到低：
- max-width\max-height\min-width\min-height
- flex-basis
- width\height
- 内容本身的size
开启flex布局
- flex块级元素；
- inline-flex行内级元素 设置display属性 为 flex 或者 inline-flex 可以 为 flex container。（display：inline-flex）
flex布局模型
主轴（相当于x）：main axis； 主轴的开始位置叫 main start；结尾位置叫main end
交叉轴（相当于y）：cross axis； cross start ； cross end
