flex布局学习

废话不多说，直接来吧！
flex就是弹性布局的意思，任何一个容器都可以设置为一个flex布局。但是当一个容器设置为flex布局后那么float就会失效，clear清除浮动会失效，文字对齐也会失效！！！！
设置一个容器为flex布局的方式为：display：flex；

flex的属性有：
flex-direction：决定主轴的方向（这个元素的子元素的排列方向）
flex-direction属性的值：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap：决定在主轴的方向上如何换行
fles-wrap属性的值：
nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

felx-flow：这个属性是flex-direction和flex-wrap两个属性的缩写方式
flex-flow属性的值：（按照顺序填写即可）

justify-content：决定项目在主轴上的排列方式
justify-content属性的值：
flex-start（默认值）：向左对齐
flex-end：向右对齐
center： 居中
space-between：左右两边不留空隙剩余的空间平均分配
space-around：左右两边距边界宽度一样，剩下的空间平均分配
在这里插入图片描述

上面说的是flex的一些基础属性，还有一些属性还没能很好的掌握，等掌握好了再来更新吧!