如何使用flex布局

Flex布局是CSS3中新增的一种布局方式，它可以实现页面元素的弹性布局，使得页面的排版更加灵活和高效。在使用Flex布局时，需要使用flex容器和flex项目两个概念。

flex容器指的是一个拥有Flex属性的父元素，它可以将它的子元素排列到一行或者一列，并且可以控制它们的排列顺序和间距。

flex项目则是指被包含在flex容器中的子元素，这些子元素会根据flex容器的属性进行排列和布局。

下面是使用Flex布局的步骤：

1. 将父元素设置为flex容器
使用display属性将父元素设置为flex或inline-flex，这样父元素就成为了一个Flex容器。如下所示：

   .container {
       display: flex;
   }

2. 设置Flex容器的属性
设置flex容器的各种属性，比如排列方向、换行方式、对齐方式等等。如下所示：

   .container {
       display: flex;
       flex-direction: row; // 设置排列方向为水平方向
       justify-content: center; // 沿主轴居中对齐
       align-items: center; // 沿交叉轴居中对齐
   }

3. 设置Flex项目的属性
设置Flex项目的各种属性，比如弹性因子、对齐方式、空间占比等等。如下所示：

   .item {
       flex: 1; // 设置弹性因子为1，自动占据剩余空间
       align-self: center; // 沿交叉轴居中对齐
   }