CSS flex布局（弹性布局/弹性盒子）

CSS flex布局是一种弹性布局模式，它可以快速、简单地实现各种布局应用场景，如水平、垂直居中，等分布局，自适应布局等等。下面是一些基本的用法：

容器的属性

1. display: flex;：设置容器为flex布局模式；
2. flex-direction: row/column;：设置主轴方向，默认为行（row）方向，可设置为列（column）方向；
3. justify-content: flex-start/flex-end/center/space-between/space-around/space-evenly;：设置主轴对齐方式，分别为：起点对齐、终点对齐、居中对齐、两端对齐、元素之间等间距对齐、元素之间有相同间距对齐；
4. align-items: stretch/flex-start/flex-end/center/baseline;：设置交叉轴对齐方式，分别为：拉伸对齐（高度充满整个容器）、起点对齐、终点对齐、居中对齐、基线对齐；
5. flex-wrap: nowrap/wrap/wrap-reverse;：设置是否换行，分别为：不换行、换行、反向换行；
6. align-content: stretch/flex-start/flex-end/center/space-between/space-around;：设置多行对齐方式，只有当多行元素总高度大于容器高度时才会生效，分别为：拉伸对齐（高度充满整个容器）、起点对齐、终点对齐、居中对齐、元素之间等间距对齐、元素之间有相同间距对齐；

元素的属性

1. flex-grow: number;：设置元素在主轴方向上的占比，如果所有元素都设置该属性，将按照数字比例划分空间；
2. flex-shrink: number;：设置元素在主轴方向上的缩小比例，如果容器空间不足时，元素会按该比例缩小，如果所有元素都设置该属性，将按照数字比例缩放；
3. flex-basis: length;：设置元素在主轴方向上的初始大小，默认为auto，即元素自身大小；
4. flex: flex-grow flex-shrink flex-basis;：综合设置元素在主轴方向上的占用空间，分别对应上述三个属性，可以使用flex: 1;快速设置元素在主轴方向上的等分占比；
5. align-self: auto/stretch/flex-start/flex-end/center/baseline;：设置元素在交叉轴方向上的对齐方式，可覆盖容器的align-items设置，其值含义同上述容器属性；

示例代码如下：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1;
  text-align: center;
}

.item:nth-child(1) {
  background-color: red;
}

.item:nth-child(2) {
  background-color: green;
}

.item:nth-child(3) {
  background-color: blue;
}

该示例将三个元素等分占据整个容器，使用不同的背景色区分元素，其中容器设置了居中对齐，元素设置了等分占比。如果需要更多的用法，请参考MDN文档或其他教程资源。