CSS Flex布局

1. Flex 布局是什么?
   flex是flex Box的缩写,意为弹性布局.用来 为盒状模型提供最大的灵活性.
   任何一个容器都可以指定为Flex布局

display: flex;

行内元素也是可以使用flex布局

display: inline-flex;

Webkit 浏览器必须加上-webkit前缀

display: -webkit-flex;
display: flex;

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

1. 基本概念
   定义为flex的元素都成为flex容器,所有子元素自动成为容器成员,成为flex项目.
   容器默认存在两根轴,水平的主轴,垂直的交叉轴.
   项目默认沿主轴排列.

2. 容器的属性

这六个属性设置在容器上

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction属性
flex-direction 决定主轴的方向(即项目的排列方向)

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

row(默认值): 主轴为水平方向,起点在左端
row-reverse: 主轴水平方向,起点在右端
column: 交叉轴方向,起点在上沿
column-reverse: 交叉轴方向,起点在下沿