UniApp中Flex布局学习

文章目录

• 前言
• 一、学习
• • 1、父节点
  • 2、子节点
• 二、避坑指南
• • 1、子元素宽度超出预期
  • [2、 垂直对齐失效](#2、 垂直对齐失效)
  • 3、多行对齐陷阱
  • [4、在 ScrollView 内无法滚动](#4、在 ScrollView 内无法滚动)
  • [5、Gap 属性兼容方案](#5、Gap 属性兼容方案)
  • [6、 最后一行左对齐](#6、 最后一行左对齐)
  • 7、绝对定位的冲突
  • [8、 移动端适配技巧：](#8、 移动端适配技巧：)
  • 9、动画性能优化
• 三、性能优化注意事项

前言

使用uniapp过程中，经常遇到flex 不知道如何使用

有时候想换个行，真的很蛋疼。

一、学习

1、父节点

.parent {
  display: flex; /* 启用弹性布局 */ 
  flex-direction: row; /* 或 column  -子元素排列方向 */
  justify-content:flex-start;/*左对齐、center居中、space-between两端分散  -主轴对齐方式*/
  align-items:flex-start; /*顶部对齐）、center垂直居中  -交叉轴对齐*/
  flex-wrap: wrap; /* 允许子元素换行 */
}

2、子节点

.item {
  flex: 1; /* 所有子元素等分宽度 */
}
.item-2x {
  flex: 2; /* 占据2份空间 */
}
.item {
  width: 50%; /* 每行显示2个子元素 */
}
.item {
  flex: 0 0 33.333%; /* 每行显示3个，不允许伸缩 */
}
.item {
  flex: 0 0 calc(33.333% - 15rpx); /* 三列布局 -间距处理*/
}
.fixed-item {
  flex: none; /* 固定宽度，不伸缩 */
  width: 200rpx; 
}

---

二、避坑指南

1、子元素宽度超出预期

原因 ：Flex 项目默认 min-width: auto 会使元素至少等于内容宽度
正确：

.item {
  min-width: 0; /* 允许内容收缩 */
  overflow: hidden; /* 文本溢出处理 */
}

---

2、 垂直对齐失效

原因 ：align-items 需容器有明确高度
正确：

.container {
  display: flex;
  height: 100vh; /* 必须声明高度 */
  align-items: center;
}

---

3、多行对齐陷阱

现象 ：align-content 仅在 flex-wrap: wrap 时生效
正确：

.container {
  flex-wrap: wrap;
  align-content: space-between; /* 控制多行间距 */
}

---

4、在 ScrollView 内无法滚动

原因 ：Flex 容器默认 overflow: visible
正确：

.scroll-container {
  display: flex;
  flex-direction: column;
  overflow: auto; /* 启用滚动 */
  height: 300px; /* 必须限定高度 */
}

---

5、Gap 属性兼容方案

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -5px; /* 负边距抵消 */
}

.item {
  margin: 5px; /* 实际间距 */
  flex-basis: calc(25% - 10px); /* 四列布局 */
}

---

6、 最后一行左对齐

.container::after {
  content: "";
  flex: auto; /* 填充剩余空间 */
}

---

7、绝对定位的冲突

现象 ：绝对定位子元素破坏布局
正确：

.container {
  position: relative; /* 创建定位上下文 */
}

.absolute-item {
  position: absolute;
  top: 0;
  left: 0;
  /* 避免使用 flex 属性 */
}

---

8、 移动端适配技巧：

.item {
  flex: 1 1 100%; /* 移动端单列 */
}

@media (min-width: 768px) {
  .item {
    flex: 1 1 50%; /* 平板双列 */
  }
}

---

9、动画性能优化

错误：

.item {
  transition: flex 0.3s; /* 可能引发重排 */
}

正确：

.item {
  transition: transform 0.3s; /* GPU加速 */
}

---

三、性能优化注意事项

1. 避免深层嵌套：超过 3 层嵌套影响渲染性能
2. 慎用 flex-grow: 1：在动态数据容器中可能导致布局抖动
3. 替代方案：简单布局用 Grid，复杂交互用 Flex

---