用css flex布局分配空间

CSS Flex布局是一种强大的布局模式，它可以用来分配空间，使元素在容器中垂直或水平对齐，以及让元素在不同屏幕尺寸下响应式地布局。

以下是一些使用CSS Flex布局分配空间的示例：

1. 让子元素平均分配容器的宽度

.container {
  display: flex;
}

.item {
  flex: 1; /* 让所有子元素平均分配容器的宽度 */
}

2. 让子元素垂直居中

.container {
  display: flex;
  align-items: center; /* 让所有子元素垂直居中 */
}

3. 让子元素水平居中

.container {
  display: flex;
  justify-content: center; /* 让所有子元素水平居中 */
}

4. 让子元素沿着主轴从左到右排列

.container {
  display: flex;
  flex-direction: row; /* 让子元素沿着主轴从左到右排列 */
}

5. 让子元素沿着主轴从右到左排列

.container {
  display: flex;
  flex-direction: row-reverse; /* 让子元素沿着主轴从右到左排列 */
}

6. 让子元素沿着交叉轴从上到下排列

.container {
  display: flex;
  flex-direction: column; /* 让子元素沿着交叉轴从上到下排列 */
}

7. 让子元素沿着交叉轴从下到上排列

.container {
  display: flex;
  flex-direction: column-reverse; /* 让子元素沿着交叉轴从下到上排列 */
}

以上是一些使用CSS Flex布局分配空间的示例，你可以根据实际需要进行调整和变化。