? ?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">
</div>
</div>
? 然后在index.css文件中设置四个div内嵌组件的样式
.container {
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
.sub1{
width: 10px;
height: 10px;
background-color: blue;
}
.sub2{
width: 20px;
height: 20px;
background-color: green;
}
.sub3{
width: 30px;
height: 30px;
background-color: red;
}
.sub4{
width: 40px;
height: 40px;
background-color: yellow;
}?接下来我将设置不同的可选值进行演示。
首先将flex-direction的可选值设置为row，align-items的可选值设置为center，justify-content的可选值设置为center，得到图形如下图所示：
?
保持其它两个值不变，将justify-content的可选值设置为flex-end
保持其它两个值不变，将justify-content的可选值设置为flex-start
?
?保持其它两个值不变，将justify-content的可选值设置为space-around
?保持其它两个值不变，将justify-content的可选值设置为space-between
?
?现在将flex-direction的可选值保持为row，justify-content的可选值保持为center，将align-items的可选值设置为flex-start
保持其它两个值不变，将align-items的可选值设置为flex-end
?
现在将align-items的可选值保持为center，justify-content的可选值保持为center，将现在将flex-direction的可选值设置为column
接下来的样式我就不给大家演示了，相信大家可以通过以上的实例想象得到未演示的样式。
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
??