鸿蒙JS应用开发div布局介绍_鸿蒙div设置

   JS的div的布局样式一般有三种：flex-direction,justify-content和align-items。

   其中flex-direction样式用于指定容器内所有组件的排列方向，可选值有两个：row和column，分别表示水平方向排列和竖直方向排列。当flex-direction的值设置为row时，水平方向为主轴，竖直方向为副轴；当flex-dircction的值设置为column时，竖直方向为主轴，水平方向为副轴。

  justify-content样式用于指定容器内所有组件在主轴上的对齐方式，可选值有5个：flex-start、flex-end、center、space-between和space-around。

  align-item样式用于指定容器内所有组件在副轴上的对齐方式，可选值有3个：flex-stant,flex-end和center。

  组合以上3个样式，可以指定容器内所有组件的布局。相信很多小伙伴看了上面这段介绍感觉有点懵，但是不用担心，接下来我将通过多个实例来给大家进行演示。

  首先创建一个智能手表的项目，然后在index.hml文件中在最外层的div中嵌套4个div组件，代码如下所示：

<div class="container">
    <div class="sub1">
    </div>
 
    <div class="sub2">
    </div>
 
    <div class="sub3">
    </div>
 
    <div class="sub4&