uniapp Flex 布局使用记录

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>