Flex弹性布局

Flex布局是CSS布局的一种新方式，它可以简化布局过程，让开发者更容易地创建灵活的布局。Flex布局提供了一种灵活的方式来对容器内的项进行排列、对齐和分配空间。

以下是一些Flex布局的基本概念和代码示例：

1. 使用Flex布局：

.container {
  display: flex; /* 或者 inline-flex */
}

2. 在Flex容器中设置主轴方向（默认水平）：

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

3. 设置项在主轴上的对齐方式：

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

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

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

5. 设置项在交叉轴上的对齐方式（多行）：

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

6. 设置项是否可以伸缩：

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

7. 设置项的序号（排列顺序）：

.item {
  order: <integer>;
}

8. 设置项在交叉轴方向上的对齐：

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

Flex布局是一种强大的工具，可以用来创建复杂的布局，而无需使用多个嵌套的HTML元素或复杂的CSS技巧。以上代码示例提供了Flex布局的基本概念和使用方法，有助于开发者快速理解并应用这一布局技术。