弹性布局的justify-content属性

现在我来谈谈我对弹性布局中的justify-content的了解，justify-content是弹性布局的属性，写它之前一定要写上display:flex，这是弹性布局的写法而且要写在同一个类中，下面是我自己写的一个很简单的布局，现在让我们来看看它的HTML的代码：

图中是我用三个同级的div来写的大的div里面包裹这几个小的div，当然小的div也不一定是要div用标签来代替也可以，这是个人喜欢那么接下来让我们来看看css部分的代码：

上面的那些就是css部分的代码用他们来布局页面比浮动好用很多，justify-content有5个元素他们分别是：center、flex-start、flex-end、space-around、space-between它们的作用都不一样列如：justify-content：space-between是他们的元素之间有间隔而且他们的间隔距离都是一样的就如下图：

而justify-content：space-around就是所有元素都被空格包裹起来与justify-content：space-between不同的是justify-content：space-between第一个元素与第二个元素是紧贴着边框的而justify-content：space-around的第一个元素和最后一个元素相当于给它们加上了边距而且所有的距离都一样；justify-content：center就是元素居中就如图下注意：第一行是justify-content：space-around第二行才是justify-content：center的。

最后就然我们看看用justify-content里面的space-between、space-around和center属性组合的模型：

当然这是我为了好了解才用一些简单的元素打出来的里面的元素你可以换成图片、文字或者标签等等，打出来的效果都是一样的。而且弹性布局justify-content属性可以根据你屏幕的大小来自动分配间隔距离。