flex 相关属性

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相同