flex 布局笔记
flex-direction
决定主轴的方向
flex-direction
- row
- row-reverse
- column
- column-reverse
justify-content
设置主轴上的子元素排列方式
-
flex-start(默认值),与main start 对齐
-
flex-end,与main end 对齐
-
center,居中对齐
-
space-between
- 1-1-1
- flex items 之间的距离相等
- 与main start,main end对齐
-
space-evenly
- -1-1-1-
- flex items 之间的距离相等
- flex items 与main start,main end之间的距离 等于flex items之间的距离
-
space-around
- .1-1-1.
- flex items 之间的距离相等
- flex items与main start,main end 之间的距离是flex items之间的距离的一半
align-content
决定了多行flex items在cross axis上的对齐方式,用法与justify-content类似
-
stretch(默认值),与align-items的stretch类似
-
flex-start,与cross start对齐
-
flex-end,与cross 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之间的距离 等于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,与基准线对齐
flex-wrap
flex-items 是否换行
- wrap,换行 多行
- wrap-reverse,多行 反转
- nowrap,不换行 单行
flex-flow
是flex-direction和flex-wrap的简写
- flex-flow: row wrap
flex-contaier 总结
-
display:flex/inline-flex
- 开启flex 布局
-
flex-direction
- 决定主轴的方向
-
justify-content
- 决定主轴上flex-items如何排布
-
align-items
- 决定flex-items 在交叉轴上的对齐发方式
- normal
- stretch
- flex-start
- flex-end
- center
- baseline
-
flex-wrap
- nowrap
- wrap
-
flex-flow
- flex-direction
- flex-wrap
order
决定flex items 排列的顺序
- 可以设置任意整数(正整数,负数),值越小就越排在前面
- order:1
- order:-1
align-self
可以通过align-self覆盖flex container设置的align-items
- auto(默认值),遵从flex container的align-items设置
- stretch,flex-start,flex-end,center,baseline,效果与align-items一致
flex-grow
items 自动填充。
决定了flex-items如何扩展
- 可以设置任意非负数字,默认值是0
- 当flex container在main axis方向上有剩余size时,flex-grow属性才会生效
- 如果所有flex items的flex-grow总sum超过1,每个flex items扩展的size为:flex container的剩余size*flex-grow / sum
- flex-grow:1
- flex-grow:.2
flex-shrink
决定了flex items 如何收缩
- 可以设置任意非负数字(正小数,正整数,0),默认值为1
- 当flex items在main axis 方向上超过flex container的size,flex-shrink属性才会有效
- flex-shrink:2
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的简写,flex属性可以指定1个,2个或者3个值
-
单值语法:值必须为一下其中之一
- 一个无单位数(number):他会被当做 flex-grow的值
- 一个有效的宽度(width)值:它会被当作 flex-basis 的值
- 关键字 none,auto或initial
- flex:1
- flex:100px
-
双值语法:第一个值必须为一个无单位数,并且它会被当作 flex-grow的值
-
第二个值必须为以下之一
- 一个无单位数:它会被当作 flex-shrink的值
- 一个有效的宽度值:它会被当作 flex-basis 的值
-
-
三值语法
- 第一个值必须为一个无单位的数,并且它会被当作 flex-grow的值
- 第二个值必须为一个无单位的数,并且它会被当作 flex-shrink的值
- 第一个值必须为一个有效的宽度值,并且它会被当作 flex-basis的值
- felx:1 2 200px