flex布局：div内元素从左到右排列，自动换行，

Flex布局（Flexible Box Layout）是一种现代CSS布局模型，主要用于响应式设计中，让内容能够自适应屏幕大小变化。当应用于一个容器（通常是一个`<div>`或其他块级元素）上，设置了`display: flex;`属性后，它会变为弹性盒模型。在这种模式下，容器内的子元素可以：

1. **水平方向排列**：默认情况下，子元素将从容器的左侧开始，按顺序水平排列，直到填满容器宽度或者达到最大宽度限制。

2. **自动换行**：如果子元素过多无法在同一行显示，flex布局会自动创建新的行，并保持原有的顺序。

3. **伸缩调整**：通过设置`flex-grow`, `flex-shrink` 和 `flex-basis` 等属性，你可以控制每个元素占据空间的比例、是否允许收缩以及初始的尺寸。

4. **对齐和分布**：使用`align-items`, `justify-content`等属性可以设置子元素在交叉轴（垂直于主轴的方向）上的对齐方式和主轴（默认为水平方向）上的分布方式。

为了使用flex布局，只需在容器上应用合适的CSS样式，例如：

.container {
  display: flex;
  /* 可选：指定主轴方向 */
  flex-direction: row | column;
  /* 可选：设置主轴对齐方式 */
  justify-content: flex-start | center | space-between;
  /* 可选：设置交叉轴对齐方式 */
  align-items: flex-start | center;
}