前端CSS面试题-5 前端css3面试题

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;}