flex 布局 置顶

Flex布局是一种用于页面布局的CSS3新特性，它可以让容器内的子元素能够自动地伸缩和调整大小，以适应不同的屏幕尺寸和设备。要实现Flex布局，需要先将容器置顶为Flex布局，然后再对容器内的子元素进行布局。以下是一个简单的示例：

.container {
  display: flex; /* 将容器置顶为Flex布局 */
  flex-direction: row; /* 设置主轴方向为水平方向 */
  justify-content: center; /* 设置子元素在主轴上的对齐方式为居中对齐 */
  align-items: center; /* 设置子元素在交叉轴上的对齐方式为居中对齐 */
}

.container div {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 10px;
}

在上面的示例中，我们将一个div容器置顶为Flex布局，并设置了主轴方向为水平方向，子元素在主轴上的对齐方式为居中对齐，子元素在交叉轴上的对齐方式为居中对齐。然后在容器内部添加了多个div子元素，这些子元素会自动地伸缩和调整大小，以适应不同的屏幕尺寸和设备。