弹性布局（Flexbox）是一种现代化的 CSS 布局方法，它可以让您更方便地创建响应式和动态布局。在本篇文档中，我们将介绍弹性布局的基本概念以及如何在项目中使用它。
一、基本概念
- 容器（Container）：弹性布局由一个容器组成，这个容器负责对其子元素进行排列和对齐。要创建弹性容器，请在 CSS 中将
display属性设置为flex或inline-flex。
.container { display: flex; }
- 项目（Item）：容器中的子元素被称为项目。项目可以是任何 HTML 元素，例如文本、图片或其他标签。
二、弹性布局属性
1. 容器的属性
- flex-direction：设置项目在容器中排列的方向。可选值：
row（默认），row-reverse，column，column-reverse。
.container { flex-direction: row; }
- flex-wrap：设置项目是否换行。可选值：
nowrap（默认），wrap，wrap-reverse。
.container { flex-wrap: wrap; }
- flex-flow：
flex-direction和flex-wrap的简写属性。
.container { flex-flow: row wrap; }
- justify-content：设置项目在主轴上对齐的方式。可选值：
flex-start（默认），flex-end，center，space-between，space-around。
.container { justify-content: center; }
- align-items：设置项目在交叉轴上对齐的方式。可选值：
flex-start，flex-end，center，baseline（默认），stretch。
.container { align-items: center; }
- align-content：设置多行项目在交叉轴上对齐的方式。可选值：
flex-start，flex-end，center，space-between，space-around，stretch（默认）。
.container { align-content: center; }
2. 项目的属性
- order：设置项目的排列顺序。数值越小，排列越靠前，默认为 0。
.item { order: 1; }
- flex-grow：设置项目的放大比例。默认为 0，即如果存在剩余空间，也不放大。
.item { flex-grow: 1; }
- flex-shrink：设置项目的缩小比例。默认为 1，即如果空间不足，该项目将缩小。
.item { flex-shrink: 0; }
- flex-basis：设置项目在主轴方向上的初始大小。可以是长度值（如
200px）或百分比（如50%），默认值为auto。
.item { flex-basis: 200px; }
- flex：
flex-grow，flex-shrink和flex-basis的简写属性。
.item { flex: 1 1 200px; }
- align-self：允许单个项目覆盖容器的
align-items属性。
.item { align-self: flex-start; }
