21- 什么是 Flexbox？它是如何工作的？
Flexbox 是 CSS 中功能强大的布局模型，它提供了一种灵活的方式来排列容器内的元素。
它引入了两个轴：主轴和交叉轴。通过设置容器及其子元素的属性，您可以控制它们的流动和对齐方式。这是一个例子：
.container { display: flex; flex-direction: row; justify-content: center; align-items: center;}
.item { flex: 1;}22-如何使用 Flexbox 将元素垂直居中？
您可以通过将align-items: center 属性应用于容器，使用Flexbox 垂直居中元素。这会将项目沿横轴对齐，从而将它们垂直居中。这是一个例子：
.container { display: flex; align-items: center;}23-Flexbox 中“flex-grow”属性的用途是什么？
flex-grow 属性决定一个项目相对于容器内的其他弹性项目应该增长多少。默认情况下，它设置为 0，这意味着该项目不会增长。
将其设置为大于 0 的值可以使项目按比例增长。这是一个例子：
.item { flex-grow: 1;}24-如何使用 Flexbox 创建粘性页脚？
您可以使用 Flexbox 创建粘性页脚，方法是将容器的高度设置为 100vh（视口高度）并将 flex-grow: 1 应用于内容容器。这会将页脚推到视口的底部，即使内容较短也是如此。这是一个例子：
html, body { height: 100%; margin: 0;}
.container { display: flex; flex-direction: column; min-height: 100vh;}.content { flex-grow: 1;}25-如何使用 Flexbox 创建响应式网格布局？
您可以通过将 flex-wrap:wrap 属性应用于容器来使用 Flexbox 创建响应式网格布局。
当容器宽度有限时，这允许项目换行到多行。
这是一个例子：
.container { display: flex; flex-wrap: wrap;}