理解flexbox（一）
flexbox是什么
根据规范中的描述可知道，flexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调用和分配元素和空间两者之间的关系。
如何开始使用flexbox
开始使用flexbox时，你所要做的第一件事情就是声明一个flex容器。比如：
<ul> <li></li> <li></li> <li></li> </ul>
这是一个无序列表ul,里面有三个列表元素li。ul为父元素，li为子元素。要开始使用flexbox，必须先让父元素变成一个flex容器。可以在父元素中显示的设置display：flex或者display:inline-flex。这样就可以开始使用flexbox模块了。
为以上html添加基本样式，如下:
ul{ display:flex; } li{ width:100px; height:100px; background:red; margin:10px; }
效果如下：
一旦显式的设置了display属性的值为flex，无序列表ul就会自动变成flex容器，而其子元素（在本例中是指列表元素li）就变成了flex项目。
关键字：
- flex容器：父元素显式设置了display:flex
- flex项目：flex容器内的子元素
flex容器属性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
flex-direction
控制flex项目沿着主轴（水平方向）的排列方向，有四个值
row || column || row-reverse || column-reverse:分别是行，列，行的反方向，列的反方向，其中row是默认值。
代码如下：
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
ul{ display:flex; border:1px solid black; flex-direction: row; //或者 row-reverse || column || column-reverse } li{ text-align: center; font-size:20px; width:100px; height:100px; background-color: red; margin: 10px; }
四中效果如下：
row:
row-reverse:
column:
column-reverse:
flex-wrap
wrap|| nowrap|| wrap-reverse :其中nowrap是默认值。
代码如下：
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li>
</ul>
ul{ display:flex; border:1px solid black;
flex-wrap:wrap //或者 nowrap || wrap-reverse } li{ text-align: center; font-size:20px; width:100px; height:100px; background-color: red; margin: 10px; }
效果如下:
no-wrap:
wrap:
wrap-reverse:
flex-flow
flex-flow是flex-direction和flow-wrap两个属性的速记属性。
值可以是：
flex-flow: row wrap
justify-content
定义flex项目在水平方向上的对齐方式，其值：flex-start || flex-end ||center || space-between || space-around，其中flex-start是默认值。
代码如下：
ul{ display:flex; border:1px solid black; list-style: none; justify-content: space-between; //或者 flex-start || flex-end || center || space-between || space-around
padding-left:0; } li{ text-align: center; font-size:20px; width:100px; height:100px; background-color: red; margin: 10px; }
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
效果如下:
flex-start:
flex-end:
center:
space-between:
space-around:
align-items
align-items属性类似于justify-content属性。只有理解了justify-content属性，才能更好地理解这个属性。属性值： flex-start|| flex-end || center|| stretch ||baseline,默认值是stretch。
代码如下：
ul{ display:flex; border:1px solid black; list-style: none; padding-left:0; align-items: stretch;
height:100px; } li{ text-align: center; font-size:20px; width:100px; background-color: red; margin: 10px; }
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
效果如下：
stretch: 让所有flex项目的高度和flex容器高度一样。
flex-start:让所有flex项目靠cross-Axis边缘(顶部对齐)
flex-end: 让所有Flex项目靠Cross-Axis结束边缘（底部对齐）
center:让所有flex项目在cross-Axis中间(居中对齐)
basline: 让所有flex项目在cross-Axis上沿自己的极限对齐，为了显示出差别，文字大小做了调整，第一行文字底部对齐
align-center
还记得前面讨论的wrap属性吗？我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。
align-center 属性用于多行的flex容器。它也是用来控制flex项目在flex容器里的排列方式，排列效果和align-items值一样，除了baseline属性值。
值有：stretch || flex-start || flex-end || center ,其中stretch为默认值
效果如下：
stretch:
flex-start:
flex-end:
center:
总结，属性值为stretch时，可以不必为flex容器设置高度，它会自动充满容器
