弹性布局(伸缩盒模型)

当给一个盒子设置了display：flex之后，这个盒子就有了主轴 和侧轴 的概念。 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 方向：默认主轴从左向右 ，默认侧轴从上到下

1.flex-direction

flex-diretion主要是用来调整主轴的方向的，默认是水平方向

了解即可，一般来说，很少调整主轴的方向。

可选值

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

2.justify-content(重点)

justify-content主要用来设置主轴方向的对齐方式 ，可选的值有：

可选值：

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

3. align-items(重点)

align-items用于调整侧轴的对其方式 ，可选的值有：

flex-start： 元素在侧轴的起始位置对其。
flex-end： 元素在侧轴的结束位置对其。
center： 元素在侧轴上居中对其。
stretch： 元素的高度会被拉伸到最大（不能给死高度）。

4. flex-wrap

flex-wrap属性控制flex容器是单行或者多行,默认不换行

nowrap： 不换行（默认），会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。

5. flex属性

上述讲的属性都是给父盒子设置的，接下来的几个属性是给子盒子设置的。

flex属性用来设置子盒子如何分配主轴空间

flex:1

阮一峰的博客

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html