1. Flexbox简介

CSS Flexbox（Flexible Box）是一种用于在容器中分布、对齐和排列子元素的一维布局方法。它旨在提供一种更有效的方式来布局、对齐和分配在容器中项目的空间，即使它们的大小未知或是动态变化的。

2. Flexbox容器与项目

要使用Flexbox布局，你需要将一个容器的`display`属性设置为`flex`或`inline-flex`。容器内的直接子元素将成为flex项目。

• Flex容器：`display: flex;` 或 `display: inline-flex;`
• Flex项目：Flex容器内的直接子元素

3. Flexbox主要属性

• 容器属性：
  • `flex-direction`: 决定主轴的方向（row, row-reverse, column, column-reverse）
  • `flex-wrap`: 是否允许换行（nowrap, wrap, wrap-reverse）
  • `flex-flow`: `flex-direction` 和 `flex-wrap` 的简写
  • `justify-content`: 定义项目在主轴上的对齐方式（flex-start, flex-end, center, space-between, space-around, space-evenly）
  • `align-items`: 定义项目在交叉轴上的对齐方式（flex-start, flex-end, center, baseline, stretch）
  • `align-content`: 定义多行在交叉轴上的对齐方式（flex-start, flex-end, center, space-between, space-around, stretch）
• 项目属性：
  • `order`: 定义项目的排列顺序
  • `flex-grow`: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
  • `flex-shrink`: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
  • `flex-basis`: 定义了在分配多余空间之前，项目占据的主轴空间（main size）
  • `flex`: `flex-grow`, `flex-shrink` 和 `flex-basis` 的简写，默认值为 `0 1 auto`
  • `align-self`: 允许单个项目有与其他项目不同的对齐方式，可覆盖 `align-items` 属性

4. 案例讲解：Flexbox布局应用

下面是一个简单的Flexbox布局示例，用于创建一个包含三个项目的容器，这些项目在主轴上均匀分布，并有一定的间距。

在这个示例中，`.demo-container`是一个Flex容器，使用`display: flex;`和`justify-content: space-between;`来均匀分布项目，并在它们之间留出一定的间距。