flex布局是非常常用且好用的布局，通过这个布局，我们能很容易的完成元素位置控制，大小控制，对齐方式等等，本文中我们介绍一下flex布局的基础使用方法和用例；
我们使用container作为父元素，item作为子元素
设置display为flex，其子元素就变成了弹性元素，这个容器就成了弹性容器；
.container {
display: flex;
}
.item {
flex: 1; /* 填充剩余空间，即平均分配容器宽度 */
}主轴默认为横轴，使用justify-content设置主轴的对齐方式
.container {
display: flex;
justify-content: space-between; /* 主轴上的对齐方式：两端对齐 */
}另一个轴叫做交叉轴，使用align-content来设置其对齐方式
.container {
display: flex;
align-items: center; /* 交叉轴上的对齐方式：居中对齐 */
}通过主轴和交叉轴的设置，我们能定义子元素的对齐方式
.container {
display: flex;
justify-content: space-between; /* 主轴对齐方式：两端对齐 */
align-items: center; /* 交叉轴对齐方式：居中对齐 */
}换行操作，当主轴不够长时，设置flex-wrap来使子元素换行显示
.container {
display: flex;
flex-wrap: wrap; /* 允许子元素换行 */
}
.item {
flex: 1; /* 每个子元素平均分配宽度 */
}给子元素排序
.container {
display: flex;
}
.item {
order: 2; /* 控制项目的排列顺序，数值越小越靠前 */
}控制子元素自动放大和缩小，也可以通过设置flex的值来按照比例来分配剩余空间
.container {
display: flex;
}
.item {
flex: 1; /* 项目自动放大或缩小，平均分配剩余空间 */
}