CSS Flexbox（弹性布局）

CSS Flexbox是一种现代化的布局模型，主要用于在不同尺寸的屏幕上提供一致的用户体验。Flexbox可以使子元素按不同的方向排列，还可以动态地改变它们的大小，以填充可用空间。

以下是一些使用CSS Flexbox的基本示例：

1. 基本的Flexbox布局：

.container {
  display: flex;
}

在这个例子中，所有的子元素（项目）都会在一行中水平排列。

2. 在Flexbox中设置项目的方向：

.container {
  display: flex;
  flex-direction: column;
}

在这个例子中，所有的子元素都会垂直排列。

3. 在Flexbox中设置项目的对齐方式：

.container {
  display: flex;
  justify-content: center;
}

在这个例子中，所有的子元素都会水平居中。

4. 在Flexbox中设置项目的对齐方式：

.container {
  display: flex;
  align-items: center;
}

在这个例子中，所有的子元素都会垂直居中。

5. 使用Flexbox进行响应式设计：

.container {
  display: flex;
  flex-wrap: wrap;
}
 
.item {
  flex: 1;
  margin: 5px;
}

在这个例子中，如果屏幕太小，无法在一行中放下所有的子元素，那么子元素会自动换行。

6. 使用Flexbox进行弹性伸缩：

.container {
  display: flex;
}
 
.item {
  flex: 1;
}

在这个例子中，如果有多个子元素，它们会平均分配可用空间。

7. 使用Flexbox进行弹性伸缩并设置最大和最小宽度：

.container {
  display: flex;
}
 
.item {
  flex: 1;
  max-width: 100px;
  min-width: 50px;
}

在这个例子中，子元素会根据可用空间进行伸缩，但不会小于50px或大于100px。

8. 使用Flexbox进行弹性伸缩并设置排序：

.container {
  display: flex;
  order: 2;
}

在这个例子中，容器的排序是2，这意味着它将在文档中排列在后面，但只有在与其他flex容器一起使用时才有意义。

以上就是一些使用CSS Flexbox的基本示例，Flexbox还有更多复杂的用法，比如使用flex-grow, flex-shrink, flex-basis, align-self, order等属性，可以实现更多复杂的布局效果。