Flexbox

一、背景

1、什么是Flexbox？

Flex为flexible box的简写，意思是弹性布局，为了给盒模型提供更大的灵活性，提供更有效的方式来实现页面布局（适应各种显示设备和屏幕大小），可以用来填充多余的空间，以及缩小元素防止溢出。
flexbox布局是最合适的一个应用程序的组件，以及小规模的布局。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2、Flex Basic

Flex.png

使用Flex的元素被称为Flex Container，这个元素的直接子元素称为Flex Items

main-cross.png

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3、作用在container上的属性

1. flex-direction：元素排序

属性值：row/row-reverse/column/column-reverse

2. flex-wrap：折行

属性值：nowrap/wrap/wrap-reverse

3. flex-flow : flex-direction和flex-wrap的组合
4. justify-content ：水平布局（和主轴平行）

属性值：flex-start/flex-end/center/space-between/space-around/space-evenly

5. align-items：垂直布局（和交叉轴平行），只作用于一行内容

属性值：flex-start/flex-end/center/stretch/baseline

6. align-content：垂直布局（和交叉轴平行），作用于多行内容

属性值：flex-start/flex-end/center/stretch/space-between/space-around

4、作用在items上的属性

1. order：排序，default：0

属性值：<Number> //可以为负

2. flex-grow：将一行剩余的宽度按照属性值比例进行分配

属性值：<Number>

3. flex-shrink：当每一个item.width加起来大于container.width时，按照属性之分配到没一个对应元素上并减去对应的像素值

属性值：<Number>

4. flex-basis：width的代替品（当和width同时出现时，优先级比width高）

属性值：<Number>px

5. flex：flex-grow、flex-shrink和flex-basis的结合，default：0 1 auto

其中flex-shrink和flex-basis的值可省略
eg：flex：1

6. align-self ：每一个元素的位置

属性值：flex-start/flex-end/center/stretch/baseline

5、flex小游戏

http://flexboxfroggy.com/#zh-cn