因为我们外面盒子设置了flex换行+between，所以最后一行是分成左右两边
解决+after伪元素
这样就解决了
解决flex布局最后一行(左靠齐)
2023-12-25
314
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
解决flex布局最后一行(左靠齐)
目录
相关文章
|
3月前
|
设计模式
容器
13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
在现代移动应用开发中，流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度，在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表，重点关注多行布局与对齐策略的应用。
99
2
2
|
3月前
|
开发者
UED
容器
07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中，Flex容器提供了强大而灵活的对齐系统，使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术，是构建专业级用户界面的关键。
121
0
0
|
3月前
|
UED
容器
5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
Flex布局（弹性布局）是HarmonyOS Next中最强大的布局方式之一，它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示，还是复杂的自适应界面，Flex布局都能轻松应对。
143
0
0
|
3月前
|
UED
容器
10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中，Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器，我们可以创建复杂而灵活的界面结构，满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局，以及如何合理分配和控制空间。
110
0
0
|
6月前
|
开发者
容器
鸿蒙开发：弹性布局Flex
在实际的开发中，需要掌握主轴与交叉轴的关系、换行规则及子元素属性，同时注意性能与兼容性问题，还有一点，Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
175
10
11
|
开发者
容器
|
11月前
|
前端开发
容器
|
11月前
|
前端开发
UED
容器
|
10月前
|
前端开发
UED
容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
482
34
34
|
10月前
|
容器
Bootstrap5 Flex（弹性）布局4
排序：.order 类可设置弹性子元素的排序，范围从 .order-1 至 .order-12，数字越小优先级越高。外边距：.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹：.flex-nowrap（默认）、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
133
10
10
热门文章
最新文章
1
14、商品分类等模块及flex布局
2
FLEX中无法直接addChild()
3
Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子
4
Redis 8 快来了，即将推出Redis Flex、Redis for AI，迄今为止速度最快、功能最丰富的 Redis
5
Alternating row colors in a Flex Tree control using the depthColors style
6
Flex Cookbook --13.11深度拷贝ArrayCollection
7
Flex 布局 - 项目
8
Penetrating Intranets through Adobe Flex Applications
9
Flex学习之(ActionScript之变量)
10
Flash/Flex学习笔记(4)：如何打开网页及Get/Post数据
1
13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
99
2
10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
110
3
08.HarmonyOS Next响应式布局秘籍：掌握Flex换行与对齐技术
124
4
07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
121
5
5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
143
6
开源8B参数全能扩散模型Flex.2-preview：把线稿变商稿，还能边画边改！
269
7
鸿蒙开发：弹性布局Flex
175
8
Bootstrap5 Flex（弹性）布局6
188
9
Bootstrap5 Flex（弹性）布局5
206
10
Bootstrap5 Flex（弹性）布局4
133