flex 弹性布局

Flexbox（弹性布局）是CSS3引入的一种新的布局模式，可以简便高效地创建复杂的布局结构，并且能够响应屏幕或窗口大小的变化。

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

1. display: flex; - 这个样式会创建一个弹性容器。所有的子元素默认会在这个容器内水平排列。
2. flex-direction: row | row-reverse | column | column-reverse; - 这个样式用来定义子元素的排列方向。
3. justify-content: flex-start | flex-end | center | space-between | space-around; - 这个样式用来定义子元素在主轴方向上的对齐方式。
4. align-items: flex-start | flex-end | center | baseline | stretch; - 这个样式用来定义子元素在交叉轴方向上的对齐方式。
5. flex-wrap: nowrap | wrap | wrap-reverse; - 这个样式用来定义子元素是否应该在容器内换行。
6. flex-flow: <flex-direction> || <flex-wrap>; - 这个样式是flex-direction和flex-wrap的简写。
7. align-content: flex-start | flex-end | center | space-between | space-around | stretch; - 这个样式用来定义多行子元素在容器内的对齐方式。
8. flex-grow: <number>; - 这个样式用来定义子元素的放大比例。
9. flex-shrink: <number>; - 这个样式用来定义子元素的缩小比例。
10. flex-basis: <length> | auto; - 这个样式用来定义在分配多余空间之前，子元素的默认大小。
11. flex: <flex-grow> <flex-shrink> <flex-basis>; - 这个样式是flex-grow, flex-shrink, 和 flex-basis的简写。

以下是一个简单的Flexbox布局的例子：

HTML:

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

CSS:

.container {
  display: flex; /* 创建弹性容器 */
  flex-wrap: wrap; /* 允许子元素在容器内换行 */
  justify-content: space-around; /* 子元素在主轴方向上平均分布 */
  align-items: center; /* 子元素在交叉轴方向上居中对齐 */
}
 
.item {
  flex: 1; /* 子元素等分容器空间 */
  margin: 5px; /* 子元素之间的间隔 */
  padding: 10px; /* 子元素的内填充 */
  background-color: lightblue; /* 背景颜色 */
}

这个例子中，.container 创建了一个弹性容器，.item 类的元素会在这个容器内水平排列，并且等分容器的空间。如果容器内的空间不足以容纳所有的子元素，子元素会根据flex-wrap规则换行显示。在主轴方向上，子元素被平均分布，而在交叉轴方向上，子元素居中对齐。