flex布局

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素也可以使用 Flex 布局。

.box{
display: inline-flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

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

三、容器的属性

以下6个属性设置在容器上。
flex-direction（设置主轴方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap（换行）
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow
justify-content
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items
align-items属性定义项目在侧轴上如何对齐。

align-content
align-content，设置子项在侧轴上的排列方式，并只能用于子项出现换行的情况（多行），单行是没有用的
.box{
flex-wrap: wrap ；
justify-content: flex-start | flex-end | center | space-between | space-around;
}