鴻蒙ArkUI開發(fā)：【彈性布局（主軸&交叉軸對齊方式）】
主軸對齊方式
通過justifyContent參數(shù)設(shè)置在主軸方向的對齊方式，和Row、Column的主軸對齊方式行為一樣 
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
交叉軸對齊方式
可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對齊方式，子組件默認(rèn)使用Flex組件的對齊方式。但也可以通過alignSelf單獨設(shè)置對齊方式
Flex({ alignItems: ItemAlign.Start })
ItemAlign.Auto：使用Flex容器中默認(rèn)配置。 
ItemAlign.Start：交叉軸方向首部對齊 
ItemAlign.Center：交叉軸方向居中對齊 
ItemAlign.End：交叉軸方向底部對齊 
子組件通過[alignSelf]設(shè)置在父容器交叉軸的對齊格式，覆蓋Flex布局容器中alignItems配置
審核編輯 黃宇
聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。
舉報投訴
-
組件
+關(guān)注
關(guān)注
1文章
532瀏覽量
18407 -
鴻蒙
+關(guān)注
關(guān)注
60文章
2613瀏覽量
44009
發(fā)布評論請先 登錄
相關(guān)推薦
熱點推薦
【匯思博SEEK100開發(fā)板試用體驗】03 簡約風(fēng)天氣APP開發(fā)--首頁UI布局及組件介紹
1 前言
本次開發(fā)板的評測最終目標(biāo)是做出來一個簡約風(fēng)格的天氣APP。現(xiàn)在從0開始學(xué)習(xí)基于openharmony的鴻蒙開發(fā)。這次先完成主界面的排版和布局，把應(yīng)用大體框架確定下來。
2 線
發(fā)表于 07-08 13:32
【HarmonyOS next】ArkUI-X新聞熱搜聚合App【進階】
通過ArkUI-X將鴻蒙下的新聞熱搜聚合App轉(zhuǎn)換為iOS
一、項目背景與技術(shù)選型
1.1 項目概述
本案例基于鴻蒙（HarmonyOS）開發(fā)的聚合熱搜熱榜應(yīng)用，通過調(diào)用韓小韓博客提供
發(fā)表于 06-28 21:43
【HarmonyOS next】ArkUI-X休閑益智兒童拼圖【進階】
項目，我們驗證了ArkUI-X框架的強大跨端能力。無論是華為的鴻蒙系統(tǒng)，還是iOS平臺，都能保持90%以上代碼復(fù)用率，真正實現(xiàn)了\"一次開發(fā)，多端部署\"的理想狀態(tài)。期待
發(fā)表于 06-28 21:41
網(wǎng)格布局介紹
layoutDirection方向上排列。
僅設(shè)置rowsTemplate時，Grid主軸為水平方向，交叉軸為垂直方向。
僅設(shè)置columnsTemplate時，Grid主軸為垂直方向
發(fā)表于 06-25 06:27
鴻蒙5開發(fā)寶藏案例分享---分析幀率問題
;/span>布局耗時超標(biāo)。
分析工具 ：
ArkUI Inspector ：可視化查看組件樹，定位冗余嵌套。
Frame Profiler ：<span
發(fā)表于 06-12 17:07
鴻蒙5開發(fā)寶藏案例分享---性能體驗設(shè)計
丟幀≤3幀
// 優(yōu)化前：每次滾動都重新計算布局
@State items: Array<string> = [...]
build() {
List
發(fā)表于 06-12 16:45
鴻蒙5開發(fā)寶藏案例分享---Pura X開發(fā)案例分享
?** 鴻蒙寶藏案例分享：Pura X 外屏開發(fā)實戰(zhàn)解析**
大家好！我是你們的鴻蒙開發(fā)小伙伴。今天在翻閱官方文檔時，意外發(fā)現(xiàn)了華為藏著的\"寶藏級\"案例——Pura X 折疊
發(fā)表于 06-12 11:47
鴻蒙Next實現(xiàn)瀑布流布局
好鴻蒙開發(fā)環(huán)境。打開 DevEco Studio，新建一個鴻蒙應(yīng)用項目，選擇合適的模板（如 Empty Feature Ability），設(shè)置項目名稱、包名等信息，完成項目創(chuàng)建。
## 二、
發(fā)表于 06-10 14:17
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實例（圖片美化）
?【鴻蒙開發(fā)寶藏案例分享】一次搞定多端適配的圖片美化應(yīng)用開發(fā)思路！?
Hey小伙伴們~ 今天在翻鴻蒙文檔時挖到一個超實用的大寶藏！原來官方早就悄悄提供了超多\"一多
發(fā)表于 06-03 16:09
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實例（長視頻）
class=\"ne-text\">@ohos.mediaquery</span>
彈性布局：&
發(fā)表于 06-03 15:58
彈性布局 (Flex) 提供更加有效的方式對容器中的子元素進行排列、對齊和分配剩余空間
子元素在交叉軸的對齊方式。
ItemAlign.Auto：使用Flex容器中默認(rèn)配置。
let SWh:Record = { &#
發(fā)表于 04-30 07:54
迅為itop-3568開發(fā)板AMP雙系統(tǒng)使用手冊之燒寫AMP鏡像
迅為itop-3568開發(fā)板AMP雙系統(tǒng)使用手冊之燒寫AMP鏡像
onsemi LV/MV MOSFET 產(chǎn)品介紹 &amp;amp; 行業(yè)應(yīng)用
01直播介紹直播時間2024/10/281430直播內(nèi)容1.onsemiLV/MVMOSFET產(chǎn)品優(yōu)勢&市場地位。2.onsemiLV/MVMOSFETRoadmap。3.onsemiT10
基于ArkTS語言的OpenHarmony APP應(yīng)用開發(fā)：圖片顯示器
）alignItems：**參數(shù)類型為 VerticalAlign ，表示子組件在豎直方向上的布局方。式， VerticalAlign 定義了一下三種對其方式：
Top：設(shè)置子組件在豎直方向上居頂部對齊
發(fā)表于 09-14 14:22
FS201資料（pcb &amp; DEMO &amp; 原理圖）
電子發(fā)燒友網(wǎng)站提供《FS201資料（pcb & DEMO & 原理圖）.zip》資料免費下載
發(fā)表于 07-16 11:24
?2次下載
工商網(wǎng)監(jiān)
評論