flex布局

目前在移动端用的最多，pc端也使用的越来越多
两个重要的概念：
1.开启了flex布局的元素叫 flex container
2.flex container 里面的直接子元素叫做 flex items

开启flex布局

1.flex块级元素；2.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

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

order决定了flex-items的排布顺序
可以设置任意整数（正整数、负整数、0），值越小就越排在前面用的比较少
默认值是0

align-self

flex items可以通过align-self覆盖flex container设置的align-items
stretch、flex-start、flex-end、center、baseline，效果跟align-items一致

flex-grow

flex-grow决定了flex items如何扩展
可以设置任意非负数字（正小数、正整数、0），默认值是0
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
如果所有flex items 的flex-grow总和sum超过1，每个flex item扩展的size为
flex container的剩余sizeflex-grow/sum
如果所有flex items的flex-grow总和不超过1，每个flex items扩展的size为
flex container的剩余sizeflex-grow

flex items扩展后的最终size不能超过max-width\max-height

（默认加上收缩）在没有设置flex-wrap: wrap;时，当内容超过盒子时会收缩（每个内容盒子均等收缩多余的量）

flex-shrink

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的因素，从优先级高到低
1.max-width\max-height\min-width\min-height
2.flex-basis
3.width\height
4.内容本身的size