uniappFlex布局使用记录

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>