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