Css 弹性布局（Flex）详细介绍，7年老前端一次操蛋的面试经历

在CSS中，弹性布局（Flexbox）是一种现代化的布局模型，它能够提供强大的方式来对容器内的项目进行排版、对齐和分配空间。

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

1. display: flex; - 这个属性将元素设置为弹性容器。
2. flex-direction - 这个属性定义了容器内项目的方向。可以有row（默认值，水平方向从左到右）、row-reverse、column和column-reverse四个值。
3. flex-wrap - 这个属性定义了当容器内项目宽度之和超过容器宽度时是否应该换行。可以有nowrap（默认值，不换行）、wrap和wrap-reverse三个值。
4. justify-content - 这个属性定义了项目在主轴方向上的对齐方式。可以有flex-start（默认值，从头部开始）、flex-end、center、space-between和space-around五个值。
5. align-items - 这个属性定义了项目在交叉轴方向上的对齐方式。可以有stretch（默认值，拉伸到容器的高度）、flex-start、flex-end、center和baseline五个值。
6. align-content - 这个属性定义了多行项目在交叉轴方向上的对齐方式。可以有stretch（默认值，拉伸到容器的高度）、flex-start、flex-end、center、space-between和space-around五个值。
7. flex-grow - 这个属性定义了项目的放大比例。
8. flex-shrink - 这个属性定义了项目的缩小比例。
9. flex-basis - 这个属性定义了在分配多余空间之前，项目占据的主轴空间（类似于width/height属性）。
10. flex - 这个属性是flex-grow, flex-shrink和flex-basis的简写，可以同时设置这三个值。
11. order - 这个属性定义了项目的排列顺序。

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

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
 
.item {
  flex: 1;
  margin: 5px;
  padding: 10px;
}

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

这个例子中，.container是一个弹性容器，.item是容器内的子项目。子项目通过flex: 1均分容器的空间，并且通过margin和padding增加了视觉效果的丰富性。