浅谈CSS3中的弹性布局
现在的努力，只是为了实现小时候吹过的牛逼
一、什么是弹性布局？
Flex是Flexible Box的缩写，意为"弹性布局"，他为盒模型提供了最大的灵活性。它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案—Flex布局，可以简便、完整、响应式地实现各种页面布局。他主要是用于移动端布局，对一个容器中的元素进行排列，对齐和分配空白空间。
二、基本概念
- 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
- 它的所有子元素自动成为容器成员，称为Flex项目（flex item）简称"项目"。
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
- 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
- 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
如图所示：
三、主要的属性：
父容器的六大属性：
- flex-direction 容器内项目的排列方向(默认横向排列)
- flex-wrap 容器内项目换行方式
- flex-flow 以上两个属性的简写方式
- justify-content 项目在主轴上的对齐方式
- align-items 项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
1）flex-direction属性决定主轴的方向
flex-direction：row|row-reverse|column|column-reverse；
属性可选值的范围为：
- row：默认值子元素水平排列 起点在左端
- row-reverse：子元素水平倒序排列 起点在最右端
- column：子元素垂直排列 起点在上方
- column-reverse：子元素垂直倒序排列 起点在下方
效果如下：
**2）flex-wrap **
flex-wrap: nowrap | wrap | wrap-reverse;
属性可选值的范围为：
- nowrap：默认不换行当容器宽度不够时每个项目会被挤压宽度
- wrap：换行 并且第一行容器在最上方
- wrap-reverse：换行 最后一行容器在最上方。
效果如下：
浅谈CSS3中的弹性布局（二）https://developer.aliyun.com/article/1383153
