display:flex作用

display:flex是CSS3中的一个属性，它用于指定一个容器采用Flex布局。Flex布局是一种新的布局方式，它可以使容器中的子元素能够自动排列，并且可以根据需要进行伸缩。使用Flex布局可以使得页面的布局更加灵活，适应性更强，同时也可以减少开发者的工作量。

以下是display:flex的一些常见用法和效果：

1. 将容器设置为Flex布局

.container {
  display: flex;
}

2. 设置Flex容器中子元素的排列方式

.container {
  display: flex;
  flex-direction: row; /* 水平排列 */
  flex-direction: column; /* 垂直排列 */
}

3. 设置Flex容器中子元素的换行方式

.container {
  display: flex;
  flex-wrap: nowrap; /* 不换行 */
  flex-wrap: wrap; /* 换行 */
}

4. 设置Flex容器中子元素的对齐方式

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}