第三次总结

      弹性盒子

   弹性盒子给我们提供了一个简单的布局方式。它可以帮助我们避免浮动，帮助我们更方便的实现元素横向排列，居中排列等的页面排列方式。

        当你把盒子设置为弹性盒子时，盒子里的子元素会有横向排列，和纵向排列两种方式，若没有特别设置，默认的是按横向，沿着x轴正方向的方式排列的。而主轴是可以通过flex-direction的属性改变的，系统给我们提供了几种形式：

row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

而主轴上的子元素的排列方式，可以通过justify-content 属性来设置；

flex-start：

弹性项目向行头紧挨着填充。这个是默认值。

flex-end：

弹性项目向行尾紧挨着填充。

center：

弹性项目居中紧挨着填充。

space-between：

弹性项目平均分布在该行上。

space-around：

弹性项目平均分布在该行上，两边留有一半的间隔空间。

同时弹性盒子里的侧轴元素也可以通过align-items 属性来进行布局。

stretch 各行将会伸展以占用剩余的空间。

flex-start 各行向弹性盒容器的起始位置堆叠。

flex-end 各行向弹性盒容器的结束位置堆叠。

center 各行向弹性盒容器的中间位置堆叠。

space-between 各行在弹性盒容器中平均分布。

space-around -各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。