想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

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

當我們使用JavaScript開發鴻蒙手表的App時，在CSS文件中經常要用到這三個樣式：flex-direction、justify-content和align-items。

• 樣式flex-direction用于指定容器內所有組件的排列方向，可選值有兩個：row和column，分別表示水平方向排列和豎直方向排列。當flex-direction的值設置為row時，水平方向為主軸，豎直方向為副軸;當flex-direction的值設置為column時，豎直方向為主軸，水平方向為副軸。
• 樣式justify-content用于指定容器內所有組件在主軸上的對齊方式，可選值有五個：flex-start、flex-end、center、space-between和space-around。
• 樣式align-items用于指定容器內所有組件在副軸上的對齊方式，可選值有三個：flex-start、flex-end和center。

組合使用以上三個樣式，可以指定容器內所有組件的布局。接下來，我們通過多組示例來演示以上三個樣式的組合用法。

新建一個Lite Wearable的項目。

打開文件index.hml。

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

代碼如下所示：

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

 打開文件index.css。

添加四個類選擇器，以設置4個內嵌組件div的樣式。

將第1個內嵌組件div的寬度width和高度height都設置為40px，并將其背景色設置為藍色。

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

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

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

為了設置4個內嵌組件div的布局，在類選擇器container中將flex-direction的值設置為row，以指定水平方向為主軸，從而指定容器內所有組件的排列方向為水平方向。將justify-content的值設置為flex-start，以指定容器內所有組件在主軸上的對齊方式。將align-items的值設置為center，以指定容器內所有組件在副軸上的對齊方式。

代碼如下所示：

.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; 
} 

 保存所有代碼后打開模擬器，4個內嵌組件div的排列方向為水平方向。在主軸(水平方向)上的對齊方式為左對齊。在副軸(豎直方向)上的對齊方式為居中對齊。運行效果如下圖所示：

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

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

 保存所有代碼后打開模擬器，4個內嵌組件div在主軸上的對齊方式為右對齊。運行效果如下圖所示：

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

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

 保存所有代碼后打開模擬器，4個內嵌組件div在主軸上的對齊方式為居中對齊。運行效果如下圖所示：

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

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

 保存所有代碼后打開模擬器，4個內嵌組件div在主軸上的對齊方式為兩端對齊。運行效果如下圖所示：

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

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

 保存所有代碼后打開模擬器，4個內嵌組件div在主軸上的對齊方式為分散對齊。運行效果如下圖所示：

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

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

 保存所有代碼后打開模擬器，4個內嵌組件div在副軸上的對齊方式為上對齊。運行效果如下圖所示：

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

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

 保存所有代碼后打開模擬器，4個內嵌組件div在副軸上的對齊方式為下對齊。運行效果如下圖所示：

將index.css中flex-direction的值設置為column，以指定豎直方向為主軸，從而指定容器內所有組件的排列方向為豎直方向，代碼如下所示：

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

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

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

項目源代碼，請見附件。

歡迎訂閱我的專欄【圖解鴻蒙】：

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

©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

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