定义
Flexible Box 简称 flex，意为”弹性布局”，作为CSS中的一种重要的布局模型，能提供一种更灵活，有效的，对齐、排列，分配空间给容器内的项目。
一个完整的Flex布局的元素由容器'container'和项目'item'
容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方，每根轴都有起点和终点，这对于元素的对齐非常重要
属性
关于flex的常用属性，我们分为容器属性和项目属性
容器属性
display: 设置容器为弹性布局
.container {
display: flex; /* 或 inline-flex */
}
flex-direction:定义主轴的方向（项目排列方向），有以下几种写法
-
row（默认值）：从左到右 -
row-reverse：从右到左 -
column：从上到下 -
column-reverse：从下到上.container { flex-direction: row; }
justify-content：定义项目在主轴上的对齐方式
-
flex-start（默认值）：左对齐 -
flex-end：右对齐 -
center：居中对齐 -
space-between：两端对齐，项目之间的间隔相等 -
space-around：每个项目两侧的间隔相等.container { justify-content: center; }
align-content：定义多行项目在交叉轴上的对齐方式（仅当flex-wrap为wrap或wrap-reverse时生效）。
-
stretch（默认值）：拉伸以填满整个容器 -
flex-start：顶部对齐 -
flex-end：底部对齐 -
center：居中对齐 -
space-between：两端对齐，行之间的间隔相等 -
space-around：每行两侧的间隔相等.container { align-content: space-between; }
项目属性
order:定义项目排列顺序，数值越小，排列的越靠前。
.item {
order: 2;
}
flex-gorw:定义项目的放大比例
.item {
flex-grow: 1;
}
flex-shrink:定义项目的缩小比例
.item {
flex-shrink: 0;
}
flex-basis:定义项目在主轴的初始大小
.item {
flex-basis: 100px;
}
flex：flex-grow、flex-shrink和flex-basis的简写形式
.item {
flex: 1 1 auto;
}
align-self:定义项目在交叉轴上的对齐方式，优先级高于align-items。
.item {
align-self: flex-end;
}
使用场景
在熟悉利用了flex布局后，我们可以简单粗暴的实现元素水平，垂直方向居中。这里不展开代码演示。现在各种类似app和小程序都会使用flex布局
