鸿蒙ArkUI开发：【弹性布局（主轴&交叉轴对齐方式）】
主轴对齐方式
通过justifyContent参数设置在主轴方向的对齐方式，和Row、Column的主轴对齐方式行为一样 
开发前请熟悉鸿蒙开发指导文档：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
交叉轴对齐方式
可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式，子组件默认使用Flex组件的对齐方式。但也可以通过alignSelf单独设置对齐方式
Flex({ alignItems: ItemAlign.Start })
ItemAlign.Auto：使用Flex容器中默认配置。 
ItemAlign.Start：交叉轴方向首部对齐 
ItemAlign.Center：交叉轴方向居中对齐 
ItemAlign.End：交叉轴方向底部对齐 
子组件通过[alignSelf]设置在父容器交叉轴的对齐格式，覆盖Flex布局容器中alignItems配置
审核编辑 黄宇
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。
举报投诉
-
组件
+关注
关注
1文章
551浏览量
18922 -
鸿蒙
+关注
关注
60文章
2857浏览量
45346
发布评论请先 登录
相关推荐
热点推荐
【汇思博SEEK100开发板试用体验】03 简约风天气APP开发--首页UI布局及组件介绍
1 前言
本次开发板的评测最终目标是做出来一个简约风格的天气APP。现在从0开始学习基于openharmony的鸿蒙开发。这次先完成主界面的排版和布局，把应用大体框架确定下来。
2 线
发表于 07-08 13:32
【HarmonyOS next】ArkUI-X新闻热搜聚合App【进阶】
通过ArkUI-X将鸿蒙下的新闻热搜聚合App转换为iOS
一、项目背景与技术选型
1.1 项目概述
本案例基于鸿蒙（HarmonyOS）开发的聚合热搜热榜应用，通过调用韩小韩博客提供
发表于 06-28 21:43
【HarmonyOS next】ArkUI-X休闲益智儿童拼图【进阶】
项目，我们验证了ArkUI-X框架的强大跨端能力。无论是华为的鸿蒙系统，还是iOS平台，都能保持90%以上代码复用率，真正实现了\"一次开发，多端部署\"的理想状态。期待
发表于 06-28 21:41
【HarmonyOS next】ArkUI-X休闲益智猜字谜【基础】
}
}
使用Flex+ForEach实现响应式布局，lpx单位自动适配不同屏幕密度。
四、ArkUI-X vs Flutter技术对比
特性
ArkUI-X
Flutter
开发语
发表于 06-26 20:01
网格布局介绍
layoutDirection方向上排列。
仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。
仅设置columnsTemplate时，Grid主轴为垂直方向
发表于 06-25 06:27
鸿蒙5开发宝藏案例分享---分析帧率问题
;/span>布局耗时超标。
分析工具 ：
ArkUI Inspector ：可视化查看组件树，定位冗余嵌套。
Frame Profiler ：<span
发表于 06-12 17:07
鸿蒙5开发宝藏案例分享---性能体验设计
丢帧≤3帧
// 优化前：每次滚动都重新计算布局
@State items: Array<string> = [...]
build() {
List
发表于 06-12 16:45
鸿蒙5开发宝藏案例分享---Pura X开发案例分享
?** 鸿蒙宝藏案例分享：Pura X 外屏开发实战解析**
大家好！我是你们的鸿蒙开发小伙伴。今天在翻阅官方文档时，意外发现了华为藏着的\"宝藏级\"案例——Pura X 折叠
发表于 06-12 11:47
鸿蒙Next实现瀑布流布局
好鸿蒙开发环境。打开 DevEco Studio，新建一个鸿蒙应用项目，选择合适的模板（如 Empty Feature Ability），设置项目名称、包名等信息，完成项目创建。
## 二、
发表于 06-10 14:17
鸿蒙5开发宝藏案例分享---一多开发实例（地图导航）
规划页 ：面板滑动时布局自适应变形
3️⃣ 服务卡片 ：八宫格静态卡片多端通吃
4️⃣ 实况窗 ：胶囊形态+卡片形态双展示
最绝的是所有效果都用****ArkUI框架实现，完全遵循\"一次开发
发表于 06-03 16:17
鸿蒙5开发宝藏案例分享---一多开发实例（图片美化）
?【鸿蒙开发宝藏案例分享】一次搞定多端适配的图片美化应用开发思路！?
Hey小伙伴们~ 今天在翻鸿蒙文档时挖到一个超实用的大宝藏！原来官方早就悄悄提供了超多\"一多
发表于 06-03 16:09
鸿蒙5开发宝藏案例分享---一多开发实例（长视频）
class=\"ne-text\">@ohos.mediaquery</span>
弹性布局：&
发表于 06-03 15:58
鸿蒙5开发宝藏案例分享---折叠屏悬停态开发实践
?【鸿蒙折叠屏开发宝藏指南】原来官方藏了这么多好东西！手把手教你玩转悬停态开发**?**
Hey小伙伴们！我是你们的老朋友XX，最近在肝鸿蒙折叠屏项目时，意外挖到了官方文档里的隐藏宝藏
发表于 06-03 12:04
弹性布局 (Flex) 提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间
子元素在交叉轴的对齐方式。
ItemAlign.Auto：使用Flex容器中默认配置。
let SWh:Record = { &#
发表于 04-30 07:54
创建列表 (List) 介绍，一起来看看是做什么的
排列的列表项数量，alignListItem用于设置子组件在交叉轴方向的对齐方式。
List组件的lanes属性通常用于在不同尺寸的设备自适应构建不同行数或列数的列表，即一次
发表于 04-30 07:06
工商网监
评论