CSS---flex布局

CSS的Flexbox（弹性盒子）布局提供了一种更灵活的方式来对容器内的项目进行排列、对齐和分配空间。

以下是一些基本的Flex布局样式和它们的作用：

1. display: flex; - 这个属性会把一个容器指定为flex布局。其中的子元素（项目）会被视为flex项。
2. flex-direction - 这个属性指定了flex项的方向。可以有四个值：row, row-reverse, column, column-reverse。
3. justify-content - 这个属性用来控制flex项在主轴方向上的对齐方式。可以有五个值：flex-start, flex-end, center, space-between, space-around。
4. align-items - 这个属性用来控制flex项在交叉轴方向上的对齐方式。可以有五个值：flex-start, flex-end, center, stretch, baseline。
5. flex-wrap - 这个属性用来控制flex项在一条轴线上不能全部排列时，是否换行以及换行的方式。可以有三个值：nowrap, wrap, wrap-reverse。
6. flex-flow - 这是flex-direction和flex-wrap的简写，默认值为row nowrap。

实例代码：

.container {
  display: flex; /* 使用flex布局 */
  flex-direction: row; /* 主轴方向为水平 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 如果项太多无法一行显示则换行 */
}
 
.item {
  flex: 1; /* 所有项目平分空间 */
  /* 或者指定flex项占用的空间比例 */
  /* flex: 2; 占据两倍的空间 */
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

以上代码会创建一个水平居中、垂直居中并且可以换行的flex容器，其中的.item会平分容器的空间。