CSS04-Flex布局

CSS的Flex布局是一种灵活的布局模型，可以用来创建一个活动的、灵活的、响应式的布局。它可以使你的布局有着不同的方向，能够改变项目的顺序，以及其他的布局功能。

以下是一些使用CSS Flex布局的方法：

1. 创建一个Flex容器：

.container {
  display: flex;
}

2. 设置Flex项目在容器中的方向：

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

3. 设置Flex项目在容器中的对齐方式：

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

4. 设置Flex项目在交叉轴上的对齐方式：

.container {
  display: flex;
  align-items: flex-start | flex-end | center | baseline | stretch;
}

5. 设置Flex项目在容器主轴上的排序：

.item {
  order: <integer>; /* 默认是0 */
}

6. 设置Flex项目在容器交叉轴上的对齐方式：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

7. 设置Flex项目的放大比例：

.item {
  flex-grow: <number>; /* 默认是0 */
}

8. 设置Flex项目的缩放比例：

.item {
  flex-shrink: <number>; /* 默认是1 */
}

9. 设置Flex项目的固定大小：

.item {
  flex-basis: <length> | auto; /* 默认是auto */
}

以上就是一些使用CSS Flex布局的基本方法，你可以根据自己的需求来使用它们。