Flex布局总结

Flex布局总结

控制横竖 flex-direction

flex-direction：row | row-reverse | column | column-reverse

flex-direction	解释
row	横
row-reverse	反向横
column	竖
column-reverse	反向竖

控制换行 flex-wrap

flex-wrap：nowrap | wrap | wrap-reverse

flex-wrap	解释
nowrap	不换行
wrap	换行
wrap-reverse	反向换行

控制多行排列方式 align-content

align-content：flex-start | flex-end | center | space-between | space-around | stretch

align-content	解释
flex-start	多行开始方向
flex-end	多行结束方向
center	多行居中
space-between	多行两端等比
space-around	多行等比
stretch	多行拉伸

控制X主轴 justify-content 横向

justify-content：flex-start | flex-end | center | space-between | space-around

justify-content	解释
flex-start	开始方向
flex-end	结束方向
center	居中
space-between	平均并两端对齐
space-around	平均等比对齐

控制Y主轴align-items垂直

align-items：flex-start | flex-end | center | baseline | stretch

align-items	解释
flex-start	垂直开始方向
flex-end	垂直结束方向
center	垂直居中
baseline	垂直基线对齐
stretch	垂直拉伸对齐

复合属性，同时这是2个数值横竖以及换行

flex-flow 子元素排列方式

flex-flow	值	解释
flex-direction	參考flex-direction	排列方向
flex-wrap	參考flex-wrap	单行或者多行

单独控制元素的属性

控制子元素扩展比例： flex-grow

flex-grow	解释
number	不允许复值	0，1，2

控制子元素空间收缩 ：flex-shrink

flex-shrink
number	不允许复值	0，1，2

控制子元素元素比例：flex-basis

flex-basis
number	解释	PX ，%，auto
content	基于内容自动计算宽度
auto	无特定宽度值，取决于其它属性值

控制子元素出现顺序 order

order定义将会影响 <’ position '> 值为static元素的层叠级别，数值小的会被数值大的盖住

order	解释
整数值	-1,0,1

控制子元素XY轴对齐方式 align-self

align-self：auto | flex-start | flex-end | center | baseline | stretch

align-self	解释
auto	默认
flex-start	开始
flex-end	结束
center	居中
baseline	之间
stretch	拉伸