Flex布局

概念：

Flex布局是CSS3中新增的一种布局模式，可以方便地实现复杂的页面布局。Flex布局的主要特点是：容器和项目分别有自己的属性，并且容器内的项目可以在主轴和交叉轴上进行对齐、排列等操作。

基本概念：

1. Flex容器（Flex Container）：应用Flex布局的父元素，包含一个或多个Flex项目。

2. Flex项目（Flex Item）：容器内的子元素，被分配到主轴或交叉轴上。

3. 主轴（Main Axis）：Flex容器的排列方向，通常是水平方向（从左到右）或垂直方向（从上到下）。

4. 交叉轴（Cross Axis）：与主轴垂直的方向。

5. 主轴起点和终点（Main Start/End）：Flex容器的排列方向上的起点和终点。

6. 交叉轴起点和终点（Cross Start/End）：交叉轴方向上的起点和终点。

接下来我会分三个方面让大家了解flex布局。

Flex容器的属性：

• display: flex;：将容器设置为Flex布局。

• flex-direction: row;：指定主轴的方向，默认值是水平方向（从左到右）。其他可选值有：

  • row-reverse：水平方向，从右到左。

  • column：垂直方向，从上到下。

  • column-reverse：垂直方向，从下到上。

• justify-content: center;：定义了项目在主轴上的对齐方式。其他常用的值有：

  • flex-start：起点对齐。

  • flex-end：终点对齐。

  • space-between：两端对齐，项目之间的间隔相等。

  • space-around：每个项目两侧的间隔相等，项目之间的间隔是相邻项目间隔的一半。

• align-items: center;：定义了项目在交叉轴上的对齐方式。其他常用的值有：

  • flex-start：起点对齐。

  • flex-end：终点对齐。

  • baseline：基线对齐。

  • stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

Flex项目的属性：

• flex: 1;：定义项目的比例，用于分配主轴上的剩余空间。默认值为0，即不占据剩余空间。如果所有项目的flex值都为1，则它们平均分配剩余空间；如果某个项目的flex值大于1，则它会占据更多的空间。

• align-self: center;：定义项目自身在交叉轴上的对齐方式。可选值与align-items相同。

Flex布局的优点：

• 简化了响应式布局，可以根据不同屏幕尺寸进行灵活的适配。

• 可以快速实现多种复杂布局，减少了使用传统布局方法时的嵌套和计算量。

• 提供了更好的对齐和分布控制，使页面元素具备更强的可扩展性和可维护性。

代码演示

首先咱们用HTML代码演示一下flex布局:

在上述代码中，我们创建了一个Flex容器 .container ，内部包含三个Flex项目 .item。容器的样式设置为Flex布局，主轴方向为水平方向（flex-direction: row;），并居中对齐（justify-content: center;和align-items: center;）。每个项目的样式设置为均分剩余空间（flex: 1;），并设置了一些简单的样式用于展示效果。

通过浏览器执行上述代码如下图：

接下来是基于微信小程序的flex布局代码演示：

我们使用view标签来代替HTML中的div标签，因为在微信小程序中，视图容器使用view标签。

接下来，对应的WXSS样式如下：

在微信小程序中，我们使用WXSS来定义样式。和前面提到的HTML代码类似，我们使用了.container来表示容器，.item来表示项目。样式属性基本保持一致，只是对单位进行了适当的改变，使用了rpx作为适配单位。

编译上述代码图如下：

通过以上内容相信您对flex布局也有了一定的认识和了解，想要学习更多关于flex布局方面的知识。

关注我带您学习更多更好更深层的flex布局。