Flexbox

"Flex", "伸缩盒"，"justify", "align-items"……

什么叫Flex？

flexbox, 全名：flexible box,  意为灵活,有弹性的,多变的；Flex布局是2009年，W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局；

任何元素都可以使用flex布局；注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

flex container / flex item / main axis / cross axis ...

主轴和侧轴

在CSS中，常规的布局是基于块和内联流方向，而Flex布局是基于flex-flow流,下图很好解释了Flex布局的思想：

图片发自App

看图2个flex item（图上标示1和2）是横向排列的，这样的布局下，横向（x方向）就是 “主轴”，纵向（x方向）就是“侧轴”。

同理，如果是flex item纵向排列的，那么y方向就是“主轴”，x方法就是“侧轴”。如下图：

图片发自App

属性

flex

flex-direction 决定主轴的方向（即项目的排列方向）

flexDirection: 该属性决定主轴的方向（即项目的排列方向）

flex-grow

flex-basis

flex-flow 定义对象子元素的排列方式

flex-wrap 定义对象子元素的排列方式

align-content 定义了多根轴线的对齐方式

align-items 定义项目在交叉轴(垂直的交叉轴（cross axis）)上的对齐方式

align-self

justify-content 定义项目在主轴上的对齐方式

order

---

flex-direction:row / row-reverse / column / column-reverse  属性决定主轴的方向（即项目的排列方向）。

flex-direction

flex-flow：row nowrap / row wrap-reverse / column wrap-reverse 定义对象子元素的排列方式 

flex-flow

flex-wrap: nowrap /  wrap / wrap-reverse  默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap

justify-content: flex-start / center /  flex-end / space-between / space-around  项目在主轴上的对齐方式

justify-content

align-content:stretch / flex-start / center / flext-end / space-between / space-around 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content

align-items: flex-start / center / flex-end / stretch 定义项目在交叉轴(垂直的交叉轴（cross axis）)上如何对齐

align-items

兼容性，IE10+全面支持。

兼容性