flex初识【一】【基本属性】

6个属性

1. flex-direction属性：决定主轴的方向（即项目的排列方向）;
2. flex-wrap属性：规定如果一条轴线排不下，如何换行；
3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row/nowrap；
4. justify-content属性：定义了项目在主轴上的对齐方式；
5. align-items属性：定义项目在交叉轴上如何对齐；
6. align-content属性：定义了多根轴线的对齐方式；

主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴

交叉轴： 与主轴垂直的另一方向，称为交叉轴。

flex-direction:是按照水平方向排列还是垂直方向排列【row/column】【也就是主轴方向】

flex-wrap属性：元素排满了换不换行，换行就wrap,不换行就超出浏览器宽度继续排列，no-wrap

flew-flow是综合属性，为了防止我自己混淆，先不谈这个

下面是重点

justify-content: flex-start | flex-end | center | space-between | space-around; 水平方向排列方式和对齐方式

为什么说是排列和对齐方式呢

flex-start | flex-end | center 这三个是正经的对齐方式

space-between | space-around; 则是排列方式

align-items: flex-start | flex-end | center | baseline | stretch;【单行属性】

属性值与justify-content有三个是一样的

难道是属性赘余，应该是互相补充

justify-content是主轴【默认水平】方向的排列对齐；align-items是侧轴【默认垂直】方向的垂直对齐排列

align-content，这也是侧轴的对齐

	 flex-start：与交叉轴的起点对齐。

       flex-end：与交叉轴的终点对齐。

       center：与交叉轴的中点对齐。

       space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

       space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴   线与边框的间隔大一倍。

       stretch（默认值）：轴线占满整个交叉轴。

看图说话

盗图比自己画舒服啊，添点注释就是自己的了