flex布局，看完这篇都懂了

flex布局

开启flex布局
display:flex (独占一行)
inline-flex(允许换行)

应用在flex container上的css属性

1、flex-flow 是flex-direction || flex-warp的简写
2、flex-direction  设置主轴(main axis)的方向
3、flex-wrap  设置能否换行
4、justify-content  设置flex items在main axis上的对齐方式
5、align-items   设置flex items在cross axis上的对齐方式(一般针对单行)
6、align-content 设置flex items在cross axis上的对齐方式(一般针对多行)

应用在flex items上的css属性

1、flex 是flex-grow flex-shrink?||flex-bassis的简写
 2、flex-grow 决定了flex items在main axis方向上如何扩展
 3、flex-basis 设置flex items在main axis方向上的base size
 4、flex-shrink 决定了flex items在main axis如何收缩
 5、order设置flex items的排布顺序
 6、align-self 允许flex items覆盖flex container 设置的align-items

flex container的属性:

row(默认值):从左向右
row-reverse:从右向左
column:从上到下
column-reverse:从下到上

image.png

justify-content: 决定了 flex items在主轴(main axis)上的对齐方式
flex-start(默认值):与main start 对齐
flex-end:与main end 对齐
center:居中对齐
space-between: flex items之间的距离相等. 与main start,mian end两端对齐
space-evenly:flex items之间的距离相等. item与mian start,mian end之间的距离等于flex item之间的距离
space-around: flex items之间的具体相等

image.png

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

 flex-start:与cross start对齐
 flex-end:与cross end对齐
 center:居中对齐
 baseline:与基准线对齐

image.png

flex-wrap 决定了单行还是多行

nowrap(默认):单行
wrap:多行
wrap-reverse:多行(对比wrap,cross start 与cross end相反)

flex-flow是 flex-direction || flex-warp的缩写

flex-flow: colum wrap 等价于
flex-direction:column
flex-wrap:wrap

flex-flow: row-reverse 等价于
flex-direction:row-reverse
flex-wrap:nowrap

align-content 决定了多行flex items在cross axis 上的对齐方式,用法和justify-content类似
stretch(默认值):与align-items的stretch类似 在cross axis上拉伸
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐

image.png

align-self flex items可以通过设置align-self覆盖flex container设置align-items
auto(默认值):遵从flex container的align-items
stretch,flex-start,flex-end,center,baseline效果跟align-items一致

flex-shrink 决定了flex items如何收缩
可以设置任意非负数字(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
每个flex item收缩的size为
flex items超出flex container的size * 收缩比例/所有flex items的收缩比例之和

收缩比例 = flex - shrink * flex item的base size
base size 就是flex item 放入flex container之前的size
flex items收缩后的最终size不能小于 min-width\min-height

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 item扩展的size为
flex container 的剩余size * flex-grow

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

举例:flex-direction为row的情况下 父容器宽度 400px 有三个子容器宽度均为100,
flex-grow分别为1,2,3
这样可以得出
A的宽度= 100 * (1/6) + 100 = 116.66
B的宽度 = 100 * (2/6) + 100 = 133.33
C的宽度 = 100 * (3/6) + 100 = 150

若 flex-grow分别为 0.1 ,0.2,0.3,则结果为:
A的宽度= 100 * 0.1 + 100 = 110
B的宽度 = 100 * 0.2 + 100 = 120
C的宽度 = 100 * 0.3 + 100 = 130

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

每个flex item 收缩的size为
flex items超出flex container 的size * 收缩比例/所有flex items的收缩比例之和

收缩比例 = flex-shrink * flex item的base size
base size就是flex item 放入 flex container之前的size

flex item收缩后的最终size不能小于min-width\min-height

举例:总容器宽度 500px 一共六个子视图,
宽度分别为110,120,130,140,150,160,
shrink为1,2,3,4,5,6,

总长度:110+120+130+140+150+160 = 810
总共得收缩的长度:810 - 500 = 310
收缩比例 是 flex-shrink * item的 主轴方向的size

sum = 110 * 1 + 120 * 2 + 130 * 3 + 140 * 4 + 150 * 5+ 160 * 6

item1的收缩比例是 110 * 1 需要收缩的具体为 310 * (110 * 1)/sum
item2的收缩比例是 120 * 1 需要收缩的具体为 310 * (120 * 2)/sum
item3的收缩比例是 130 * 1 需要收缩的具体为 310 * (130 * 3)/sum
item4的收缩比例是 140 * 1 需要收缩的具体为 310 * (140 * 4)/sum
item5的收缩比例是 150 * 1 需要收缩的具体为 310 * (150 * 5)/sum
item6的收缩比例是 160 * 1 需要收缩的具体为 310 * (160 * 6)/sum

flex-basis
设置flex items在 main axis方向的base size
auto(默认值) content 取决于内容本身的size

决定flex-item最终base size 的因素 优先级从高到低
max-width max-height min-width min-height
flex-basis
width height
内容本身的size

flex-basis 0
flex-group 1
联合使用的效果:

image.png

flex是flex-grow flex- shrink? || flex-basis
默认值是0 1 auto
none: 0 0 auto