Flex学习记录

display:flex || inline-flex —开启flex布局

flex container相关的属性

flex-direction 决定主轴的方向
row(默认值)
row-reverse
column
column-reverse

justify-content 决定flex-items在主轴方向的对齐方式
flex-start(默认值)
center
flex-end
space-between 两端对齐
space-around 两端的距离是中间间距的一半
space-evenly 所有等分

align-items 决定flex-items在交叉轴方向的对齐方式
normal(默认值) 和stretch效果一样
stretch 当flex items在交叉轴上没有高度时，会自动拉伸
flex-start
center
flex-end
baseline 与基准线对齐

flex-wrap 决定flex-container是单行还是多行
nowrap(默认值) 单行、不换行
wrap 多行、换行
wrap-reverse 多行、交叉轴start和end相反

flex-flow 是flex-direction和flex-wrap的缩写

align-content 决定多行的时候在交叉轴的对齐方式，用法和justify-content相似
stretch(默认值) 没有高度时，自动拉伸
flex-start
flex-end
center
space-between
space-around
space-evenly

flex items的属性

order 决定排列顺序，值越小越排在前面，默认值为0

align-self: flex items可以通过align-self来覆盖flex container中align-items的设置
auto 遵从flex container中align-items的设置
stretch 当flex items在交叉轴上没有高度时，会自动拉伸
flex-start
center
flex-end
baseline 与基准线对齐

flex-grow: 当所有的flex items无法填满父容器的宽度时，通过flex-grow来分配需要拉伸的大小
大家的值相等时，平分剩下的宽度，总和大于1时，按比例分配，小于1时，相乘得到宽度

flex-shrink: 当所有的flex items超过父容器的宽度时，通过flex-grow来分配需要收缩的大小
大家的值相等时，平均收缩多余的宽度，总和大于1时，按比例分配，小于1时，相乘得到宽度

flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。