flex 这个 CSS 属性已经标准化很久了。
目前市面上绝大多数浏览器也已经支持。
在实际应用中也经常会用到。
但是涉及到部分属性的时候偶尔还是会不记得。因此在这里记录一下。
1. Flex 容器相关属性
flex-direction
内部元素排列方向,取值有
row:横向; row-reverse:横向逆向; column:纵向; column-reverse:纵向逆向;
flex-wrap
nowrap: 强制所有元素同行
wrap:如果排布不下,则自动向下换行
wrap-reverse: 如果排布不下,则自动向上换行
flex-flow
flex-direction 和 flex-wrap 组合属性,默认为 row nowrap
justify-content
元素在主轴上的对其方式,取值有
flex-start:对齐到主轴首部
flex-end: 对其到主轴尾部
center:居中对齐
space-between:两端对齐。剩余空白部分平均分布在项目间,首尾没有空白
space-around:两端对齐。剩余空白部分平均分布在项目间,首尾有空白
align-items
元素在副轴上的对齐方式,取值有
flex-start:对齐到副轴首部
flex-end:对其到副轴尾部
center:对齐到副轴中间
baseline: 以文字基线对齐
stretch:填满整个副轴
align-content
元素如果在主轴上换行,则多行元素在副轴上如何对齐,取值有
flex-start:对齐到副轴首部
flex-end:对其到副轴尾部
center:居中对齐
space-between:两端对齐。剩余空白部分平均分布在项目间,首尾没有空白
space-around:两端对齐。剩余空白部分平均分布在项目间,首尾有空白
stretch:填满整个副轴
2.内部项目属性
order
排布顺序,数字越小越靠近主轴首部,默认为0
flex-grow
项目方法比例,默认为0
flex-shrink
项目缩小比例,默认为1
flex-basis
项目默认占据的空间,默认为auto
flex
组合属性, flex-frow flex-shrink flex-basis,默认为 0 1 auto。
align-self
元素在副轴上的对齐方式,取值与align-item相同