鴻蒙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文章
532瀏覽量
18394 -
鴻蒙
+關注
關注
59文章
2595瀏覽量
43980
發布評論請先 登錄
相關推薦
熱點推薦
【匯思博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
網格布局介紹
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開發寶藏案例分享---一多開發實例（圖片美化）
?【鴻蒙開發寶藏案例分享】一次搞定多端適配的圖片美化應用開發思路！?
Hey小伙伴們~ 今天在翻鴻蒙文檔時挖到一個超實用的大寶藏！原來官方早就悄悄提供了超多\"一多
發表于 06-03 16:09
鴻蒙5開發寶藏案例分享---一多開發實例（長視頻）
class=\"ne-text\">@ohos.mediaquery</span>
彈性布局：&
發表于 06-03 15:58
彈性布局 (Flex) 提供更加有效的方式對容器中的子元素進行排列、對齊和分配剩余空間
子元素在交叉軸的對齊方式。
ItemAlign.Auto：使用Flex容器中默認配置。
let SWh:Record = { &#
發表于 04-30 07:54
onsemi LV/MV MOSFET 產品介紹 &amp;amp; 行業應用
01直播介紹直播時間2024/10/281430直播內容1.onsemiLV/MVMOSFET產品優勢&市場地位。2.onsemiLV/MVMOSFETRoadmap。3.onsemiT10
基于ArkTS語言的OpenHarmony APP應用開發：圖片顯示器
）alignItems：**參數類型為 VerticalAlign ，表示子組件在豎直方向上的布局方。式， VerticalAlign 定義了一下三種對其方式：
Top：設置子組件在豎直方向上居頂部對齊
發表于 09-14 14:22
FS201資料（pcb &amp; DEMO &amp; 原理圖）
電子發燒友網站提供《FS201資料（pcb & DEMO & 原理圖）.zip》資料免費下載
發表于 07-16 11:24
?2次下載
工商網監
評論