【圖解鴻蒙】多組示例演示三個樣式的組合用法

當咱們使用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的值分別設置爲subcontainer一、subcontainer二、subcontainer三、subcontainer4。

    代碼以下所示：

<div class="container">
    <div class="subcontainer1">
    </div>

    <div class="subcontainer2">
    </div>

    <div class="subcontainer3">
    </div>

    <div class="subcontainer4">
    </div>
</div>

    打開文件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，代碼以下所示：

文章後續內容和相關附件能夠點擊下面的原文連接前往學習
原文連接：https://harmonyos.51cto.com/posts/2266#bkwz

想了解更多關於鴻蒙的內容，請訪問：

51CTO和華爲官方戰略合做共建的鴻蒙技術社區

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