在使用flex布局前,我需要设定flex布局,可以理解为是一个flex布局的容器
一句代码:display:flex
flex-direction
后面可以选择的有四个属性,常用的有两个
row(默认):水平排列
row-reverse:相反方向的水平排列
colcum:列排列
colcum-reverse:相反方向的列排列
强调:如果子集的宽度大于容器的宽度,那就不会在按照子集设定的宽度了,就按照容器的最大宽度来给子集平分。
例如:我们的容器有1000px;有五个自己,每一个设置为300px;这个时候的子集并不是300px,每个子集的宽度均为200px.
flex-wrap
nowrap:不换行
wrap:换行
wrap-reverse:按照倒叙换行
flex-flow
这是一个复合属性,是flex-direction以及flex-wrap的复合
justify-content
子元素在主轴上的对齐模式
flex-start(默认)
flex-end
center(常用)
space-between:伸缩空间两边碰,中间空间平均分
space-around:整体来说平均分
align-content
控制容器内多行在交叉轴上的排列方式
注意:只有在换行的时候有用
个人感觉不常用,上一个和下一个的配套常用。
align-items
子元素在交叉轴上的对齐模式
常用总结:
控制主轴方向:flex-direction
控制子元素换行:flex-wrap
控制flex-item在主轴上的对齐:justify-content
控制flex-item在交叉轴上的对齐 align-items