css学习笔记

##Flex布局，是弹性盒子模型，分为横轴竖轴。

在使用flex布局之前，我们需要了解一些概念：

a、设置了flex布局之后，包裹在其中的子元素自动成为flex容器的子成员

b、flex容器有两个轴线，水平轴和垂直轴

c、默认按水平方向排列

了解了基本概念之后，我们就要用flex布局了，如何设置呢？那就需要我们了解flex的样式属性；flex的样式属性分为两种，一个是作用在容器上的，即设置为flex的元素，一个是作用在成员上的：

总共有六个：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

#flex-direction：设置容器排列方向，默认主轴即水平方向；（row,row-reverse,column,column-reverse)

#flex-wrap：元素换行，即子元素在轴线上放不下时是否换行以及如何换行(nowrap,wrap,wrap-reverse)

#flex-flow：flex-direction和flex-wrap的简写

#justify-content：主轴的对齐方式，不一定是水平轴，由flex-direction指定

#align-items：交叉轴对齐方式

#align-content：多轴对齐方式，只有一轴的时候没有效果