网站建设与服务技能实训心得体会seo流量优化

uniapp Flex 布局使用记录

Flex 布局是一种非常强大的 CSS 布局方式，它能够帮助我们轻松地实现响应式设计和复杂的布局。在 uniapp 中，Flex 布局同样得到广泛的支持。本文将介绍 uniapp 中 Flex 布局的基础用法以及一些常见的应用场景。

1. Flex 布局基本概念

在 CSS 中，Flex 布局是通过设置父容器为 display: flex 来启动的，它使得子元素能够自动调整大小，排列方式也非常灵活。

基本属性

• display: flex：将父元素设为弹性容器。
• flex-direction：定义主轴方向，决定了子元素的排列方向。可选值为：
  • row：水平排列（默认）
  • column：垂直排列
• justify-content：定义子元素在主轴（水平或垂直）上的对齐方式。
  • flex-start：默认值，子元素对齐到主轴起始位置
  • center：子元素居中对齐
  • space-between：子元素之间的间距相等
  • space-around：子元素两端有相等的间距
• align-items：定义子元素在交叉轴（垂直或水平）上的对齐方式。
  • flex-start：对齐到交叉轴的起点
  • center：子元素居中对齐
  • stretch：子元素拉伸填充容器（默认）

Flex 相关缩写

• flex: 控制项目的增长、收缩及占用空间的能力。它是 flex-grow、flex-shrink 和 flex-basis 的简写。

2. 基本用法

2.1 基本水平排列

<template><view class="flex-container"><view class="flex-item">项目 1</view><view class="flex-item">项目 2</view><view class="flex-item">项目 3</view></view>
</template><style>
.flex-container {display: flex;justify-content: space-between;align-items: center;
}.flex-item {background-color: #3eaf7c;color: #fff;padding: 10px;
}
</style>

2.2 垂直排列

<template><view class="flex-container-column"><view class="flex-item">项目 A</view><view class="flex-item">项目 B</view><view class="flex-item">项目 C</view></view>
</template><style>
.flex-container-column {display: flex;flex-direction: column;justify-content: center;align-items: flex-start;
}.flex-item {background-color: #f39c12;color: #fff;padding: 10px;
}
</style>

3. 高级用法

3.1 Flex 子项的动态调整大小

<template><view class="flex-container"><view class="flex-item flex-grow">项目 1</view><view class="flex-item flex-grow">项目 2</view><view class="flex-item">项目 3</view></view>
</template><style>
.flex-container {display: flex;justify-content: space-between;
}.flex-item {background-color: #3498db;color: #fff;padding: 10px;
}.flex-grow {flex-grow: 1; /* 允许子项占据剩余空间 */
}
</style>

3.2 Flex 布局中间对齐

<template><view class="flex-container"><view class="flex-item">项目 1</view><view class="flex-item">项目 2</view><view class="flex-item">项目 3</view></view>
</template><style>
.flex-container {display: flex;justify-content: center; /* 水平居中对齐 */align-items: center;     /* 垂直居中对齐 */height: 100vh;           /* 高度为视口高度 */
}.flex-item {background-color: #e74c3c;color: #fff;padding: 20px;
}
</style>

4. 常见应用场景

4.1 居中对齐

有时我们需要将某个元素居中显示，Flex 布局提供了非常简便的方法：

<template><view class="center-container"><view class="center-item">居中内容</view></view>
</template><style>
.center-container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.center-item {background-color: #2ecc71;padding: 20px;
}
</style>

4.2 多行布局

Flex 布局还支持多行显示，只需要设置 flex-wrap: wrap 即可：

<template><view class="flex-container-wrap"><view class="flex-item">项目 1</view><view class="flex-item">项目 2</view><view class="flex-item">项目 3</view><view class="flex-item">项目 4</view><view class="flex-item">项目 5</view></view>
</template><style>
.flex-container-wrap {display: flex;flex-wrap: wrap;   /* 允许换行 */
}.flex-item {width: 30%;margin: 5px;background-color: #f39c12;color: #fff;padding: 10px;
}
</style>