flex布局的属性总结

在使用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