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