css的flex box布局

Flex也就是flexable box，即为“弹性布局”，为盒模型提供了最大的灵活性。

采用flex布局的元素，称之为“flex容器”（flex container），而在容器里面的元素称之为“flex项目”（flex item）；

首先需要理解的是flex容器的轴；水平的主轴和垂直的交叉轴；项目默认按照主轴排列；

在了解基本的容器轴之后，看看flex容器的基本属性；

有以下6个属性：

• flex-direction：row | row-reverse | column | column; 确定主轴方向
• flex-wrap： nowrap | wrap | wrap-reverse 确定项目超出换行属性
• flex-flow：<flex-direction> || <flex-wrap> 前两个属性的简写形式
• justify-content：flex-start | flex-end | center |space-between |space-around 在主轴上的对齐方式
• align-items： flex-start | flex-end | center | baseline | stretch 在交叉轴上的对齐方式
• align-content：flex-start | flex-end | center |space-between |space-around | stretch 多根轴线的对齐方式

主要属性的值可以参考css flexbox标准，或是自己试试。

下面只要是flex项目的属性，也有6个：

• order：项目的排列顺序，值越小越靠前，为Number属性，默认为0；
• flex-grow：定义项目的放大比例，默认为0，即：即使有剩余空间也不放大；
• flex-shrink： 定义项目的缩小比例，默认为1，即：如果空间不足将缩小；
• flex-basis： 定义了再分配剩余空间之前，项目的本来大小（item size），默认为auto，可以设置为百分比、em或是px；
• flex: none|[<flex-grow>||<flex-shrink>?||<flex-basis>]，为前三个属性的简写，默认值为1 0 auto，该属性有两个快捷值，auto：1 1 auto 和none：0 0 auto
• align-self：单独一个项目在交叉轴的对齐方式；

了解了容器和项目的属性之后，上手写一写布局，估计就会了解很多，为了自己熟悉才写的一个。

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