CSS3--伸缩盒模型——flex布局

伸缩盒模型（Flexible Box Layout），又称flexbox，是CSS3新引入的一种布局模式。它可以使容器内的子元素可以在任何方向上成比例增长或收缩，以最大化空间使用。

以下是flex布局的基本属性：

1. display: flex; 或 display: inline-flex; 将元素定义为flex容器。
2. flex-direction 定义了容器内元素的排列方向。
3. flex-wrap 定义如果一行排不下时，元素如何换行。
4. flex-flow 是flex-direction和flex-wrap的简写。
5. justify-content 定义了元素在主轴方向上的对齐方式。
6. align-items 定义了元素在交叉轴方向上的对齐方式。
7. align-content 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么这个属性不起作用。

示例代码：

.container {
  display: flex; /* 或者 inline-flex */
  flex-direction: row; /* 或 column, row-reverse, column-reverse */
  flex-wrap: wrap; /* 或 nowrap */
  justify-content: flex-start; /* 或 flex-end, center, space-between, space-around */
  align-items: stretch; /* 或 flex-start, flex-end, center, baseline */
  align-content: stretch; /* 或 flex-start, flex-end, center, space-between, space-around */
}
 
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

HTML结构：

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

以上代码定义了一个flex容器，其中包含三个项目。通过CSS类定义了flex布局的各种特性。