想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

當(dāng)我們使用JavaScript開(kāi)發(fā)鴻蒙手表的App時(shí)，在CSS文件中經(jīng)常要用到這三個(gè)樣式：flex-direction、justify-content和align-items。

• 樣式flex-direction用于指定容器內(nèi)所有組件的排列方向，可選值有兩個(gè)：row和column，分別表示水平方向排列和豎直方向排列。當(dāng)flex-direction的值設(shè)置為row時(shí)，水平方向?yàn)橹鬏S，豎直方向?yàn)楦陛S;當(dāng)flex-direction的值設(shè)置為column時(shí)，豎直方向?yàn)橹鬏S，水平方向?yàn)楦陛S。
• 樣式j(luò)ustify-content用于指定容器內(nèi)所有組件在主軸上的對(duì)齊方式，可選值有五個(gè)：flex-start、flex-end、center、space-between和space-around。
• 樣式align-items用于指定容器內(nèi)所有組件在副軸上的對(duì)齊方式，可選值有三個(gè)：flex-start、flex-end和center。

組合使用以上三個(gè)樣式，可以指定容器內(nèi)所有組件的布局。接下來(lái)，我們通過(guò)多組示例來(lái)演示以上三個(gè)樣式的組合用法。

新建一個(gè)Lite Wearable的項(xiàng)目。

打開(kāi)文件index.hml。

在最外層的組件div中嵌套四個(gè)組件div，將屬性class的值分別設(shè)置為subcontainer1、subcontainer2、subcontainer3、subcontainer4。

代碼如下所示：

<div class="container"> 
    <div class="subcontainer1"> 
    </div> 
 
    <div class="subcontainer2"> 
    </div> 
 
    <div class="subcontainer3"> 
    </div> 
 
    <div class="subcontainer4"> 
    </div> 
</d 

 打開(kāi)文件index.css。

添加四個(gè)類(lèi)選擇器，以設(shè)置4個(gè)內(nèi)嵌組件div的樣式。

將第1個(gè)內(nèi)嵌組件div的寬度width和高度height都設(shè)置為40px，并將其背景色設(shè)置為藍(lán)色。

將第2個(gè)內(nèi)嵌組件div的寬度width和高度height都設(shè)置為60px，并將其背景色設(shè)置為綠色。

將第3個(gè)內(nèi)嵌組件div的寬度width和高度height都設(shè)置為80px，并將其背景色設(shè)置為紅色。

將第4個(gè)內(nèi)嵌組件div的寬度width和高度height都設(shè)置為100px，并將其背景色設(shè)置為黃色。

為了設(shè)置4個(gè)內(nèi)嵌組件div的布局，在類(lèi)選擇器container中將flex-direction的值設(shè)置為row，以指定水平方向?yàn)橹鬏S，從而指定容器內(nèi)所有組件的排列方向?yàn)樗椒较?。將justify-content的值設(shè)置為flex-start，以指定容器內(nèi)所有組件在主軸上的對(duì)齊方式。將align-items的值設(shè)置為center，以指定容器內(nèi)所有組件在副軸上的對(duì)齊方式。

代碼如下所示：

.container { 
    flex-direction: row; 
    justify-content: flex-start; 
    align-items: center; 
    width: 454px; 
    height: 454px; 
} 
.subcontainer1 { 
    width: 40px; 
    height: 40px; 
    background-color: blue; 
} 
.subcontainer2 { 
    width: 60px; 
    height: 60px; 
    background-color: green; 
} 
.subcontainer3 { 
    width: 80px; 
    height: 80px; 
    background-color: red; 
} 
.subcontainer4 { 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
} 

 保存所有代碼后打開(kāi)模擬器，4個(gè)內(nèi)嵌組件div的排列方向?yàn)樗椒较?。在主軸(水平方向)上的對(duì)齊方式為左對(duì)齊。在副軸(豎直方向)上的對(duì)齊方式為居中對(duì)齊。運(yùn)行效果如下圖所示：

將index.css中主軸上的對(duì)齊方式修改為flex-end，代碼如下所示：

.container { 
    flex-direction: row; 
    justify-content: flex-end; 
    align-items: center; 
    width: 454px; 
    height: 454px; 
} 

 保存所有代碼后打開(kāi)模擬器，4個(gè)內(nèi)嵌組件div在主軸上的對(duì)齊方式為右對(duì)齊。運(yùn)行效果如下圖所示：

將index.css中主軸上的對(duì)齊方式修改為center，代碼如下所示：

.container { 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    width: 454px; 
    height: 454px; 
} 

 保存所有代碼后打開(kāi)模擬器，4個(gè)內(nèi)嵌組件div在主軸上的對(duì)齊方式為居中對(duì)齊。運(yùn)行效果如下圖所示：

將index.css中主軸上的對(duì)齊方式修改為space-between，代碼如下所示：

.container { 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
    width: 454px; 
    height: 454px; 
} 

 保存所有代碼后打開(kāi)模擬器，4個(gè)內(nèi)嵌組件div在主軸上的對(duì)齊方式為兩端對(duì)齊。運(yùn)行效果如下圖所示：

將index.css中主軸上的對(duì)齊方式修改為space-around，代碼如下所示：

.container { 
    flex-direction: row; 
    justify-content: space-around; 
    align-items: center; 
    width: 454px; 
    height: 454px; 
} 

 保存所有代碼后打開(kāi)模擬器，4個(gè)內(nèi)嵌組件div在主軸上的對(duì)齊方式為分散對(duì)齊。運(yùn)行效果如下圖所示：

將index.css中副軸上的對(duì)齊方式修改為flex-start，代碼如下所示：

.container { 
    flex-direction: row; 
    justify-content: space-around; 
    align-items: flex-start; 
    width: 454px; 
    height: 454px; 
} 

 保存所有代碼后打開(kāi)模擬器，4個(gè)內(nèi)嵌組件div在副軸上的對(duì)齊方式為上對(duì)齊。運(yùn)行效果如下圖所示：

將index.css中副軸上的對(duì)齊方式修改為flex-end，代碼如下所示：

.container { 
    flex-direction: row; 
    justify-content: space-around; 
    align-items: flex-end; 
    width: 454px; 
    height: 454px; 
} 

 保存所有代碼后打開(kāi)模擬器，4個(gè)內(nèi)嵌組件div在副軸上的對(duì)齊方式為下對(duì)齊。運(yùn)行效果如下圖所示：

將index.css中flex-direction的值設(shè)置為column，以指定豎直方向?yàn)橹鬏S，從而指定容器內(nèi)所有組件的排列方向?yàn)樨Q直方向，代碼如下所示：

.container { 
    flex-direction: column; 
    justify-content: space-around; 
    align-items: flex-end; 
    width: 454px; 
    height: 454px; 
} 

 保存所有代碼后打開(kāi)模擬器，4個(gè)內(nèi)嵌組件div在主軸(豎直方向)上的對(duì)齊方式為分散對(duì)齊，并且在副軸(水平方向)上的對(duì)齊方式為右對(duì)齊。運(yùn)行效果如下圖所示：

通過(guò)以上多組示例的演示，相信大家已經(jīng)掌握了flex-direction、justify-content和align-items這三個(gè)樣式的組合用法，從而可以輕松地指定容器內(nèi)所有組件的布局了。

項(xiàng)目源代碼，請(qǐng)見(jiàn)附件。

歡迎訂閱我的專(zhuān)欄【圖解鴻蒙】：

https://harmonyos.51cto.com/column/27

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz