鴻蒙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文章
572瀏覽量
19017 -
鴻蒙
+關注
關注
60文章
2963瀏覽量
45883
發布評論請先 登錄
相關推薦
熱點推薦
【匯思博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
工商網監
評論