CSS弹性盒子知识点

CSS弹性盒子（Flexible Box，Flexbox）是一种现代化的布局模型，使得复杂的布局变得更加简单，主要应对一维布局。

下面是一些常用的CSS弹性盒子知识点和相应的代码示例：

1. 使用display: flex;来定义一个弹性容器。

.container {
  display: flex;
}

2. 使用flex-direction属性来定义项目的方向。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

3. 使用justify-content属性来定义项目在主轴上的对齐方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

4. 使用align-items属性来定义项目在交叉轴上的对齐方式。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

5. 使用flex-wrap属性来定义如何换行。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

6. 使用flex-flow属性是flex-direction和flex-wrap的简写。

.container {
  flex-flow: <flex-direction> <flex-wrap>;
}

7. 使用flex属性来定义项目的放大、缩小和优先级。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

8. 使用align-self属性来对单个项目在交叉轴上进行对齐。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

这些是CSS弹性盒子布局的基本知识点和相应的代码示例，能够帮助开发者快速理解并应用弹性盒子布局模型。