css3 flex弹性布局详解

CSS3 Flex布局提供了一种更加灵活的方式来对容器内的项目进行布局，可以简化线性或者非线性布局的设计。

以下是一些关键的CSS属性和它们的作用：

1. display: flex; 或 display: inline-flex; - 这将创建一个弹性容器。
2. flex-direction - 定义了容器内项目的方向，可以是水平的（row, row-reverse）或垂直的（column, column-reverse）。
3. flex-wrap - 定义了当容器太小以至于不能放下所有项目时，项目是否应该换行。
4. flex-flow - 是flex-direction和flex-wrap的简写形式，默认值为row nowrap。
5. justify-content - 定义了项目在主轴方向上的对齐方式（例如，在水平容器中，这将影响项目的水平对齐）。
6. align-items - 定义了项目在交叉轴方向上的对齐方式（例如，在水平容器中，这将影响项目的垂直对齐）。
7. align-self - 定义了单个项目在交叉轴方向上的对齐方式。
8. flex-grow - 定义了项目的放大比例。
9. flex-shrink - 定义了项目的缩小比例。
10. flex-basis - 定义了在分配多余空间之前，项目占据的主轴空间（类似于width/height属性）。
11. flex - 是flex-grow, flex-shrink, 和 flex-basis的简写。
12. order - 定义了项目的排序顺序。

下面是一个简单的Flex布局示例：

HTML:

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

CSS:

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
 
.flex-item {
  width: 50px;
  height: 50px;
  background-color: #f76c6c;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
}

这个例子创建了一个水平的弹性容器，其中包含了三个方块状的子元素，每个方块都有相等的空间，并且围绕在它们的中间。