通常，在布置柔性物品后，您会发现容器中留有多余的空间，如下所示。

使用属性justify-content ，您可以通过按预期分配额外的空间来使内容沿主轴对齐。您也可以调整弹性项目的对齐方式，以防它们溢出线。

用法–

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

此属性接受以下值-

• flex-start -flex-item放置在容器的开头。

• flex-end -flex-item放置在容器的末端。

• 中心-柔性物品放置在容器中，其中该额外的空间被均等地在开始时和在该柔性件的端分布的中心。

• space- between-多余的空间在弹性项目之间平均分配。

• 围绕空间-多余的空间在flex项之间平均分配，以使容器边缘与其内容物之间的空间是flex-items之间的空间的一半。

现在，通过示例，我们将看到如何使用justify-content属性。

弹性启动

将这个值传递给属性justify-content时，弹性项目将放置在容器的开头。

下面的示例演示将值flex-start传递到justify-content属性的结果。

   
   
      

         
One
         
two
         
three
         
four
         
five
         
six
      
   

它将产生以下结果-

柔性端

将这个值传递给属性justify-content时，弹性项目将放置在容器的末尾。

下面的示例演示将值flex-end传递到justify-content属性的结果。

   
   
      

         
One
         
two
         
three
         
four
         
five
         
six
      
   

它将产生以下结果-

中央

将这个值传递给属性justify-content时，弹性项目将放置在容器的中心，多余的空间在弹性项目的开始和结束处平均分配。

下面的示例演示将值中心传递给justify-content属性的结果。

   
   
      

         
One
         
two
         
three
         
four
         
five
         
six
      
   

它将产生以下结果-

间隔

将此值传递给属性justify-content时，多余的空间将平均分配到各个弹性项目之间，以使任意两个弹性项目之间的空间相同，并且弹性项目的开始和结束都与容器的边缘接触。

下面的示例演示将之间的空格值传递给justify-content属性的结果。

   
   
      

         
One
         
two
         
three
         
four
         
five
         
six
      
   

它将产生以下结果-

周围空间

在将此值传递给属性justify-content时，多余的空间将平均分配到各个弹性项目之间，以使任意两个弹性项目之间的空间相同。但是，容器的边缘与其内容物（弹性项目的开始和结束）之间的空间是弹性项目之间的空间的一半。

以下示例演示了将值space-around传递给justify-content属性的结果。

   
   
      

         
One
         
two
         
three
         
four
         
five
         
six
      
   

它将产生以下结果-

空间均匀

将此值传递给属性justify-content时，多余的空间将平均分配到各个弹性项目之间，以使任意两个弹性项目之间的空间相同（包括到边缘的空间）。

下面的示例演示将值均匀地传递给justify-content属性的结果。

   
   
      

         
One
         
two
         
three
         
four
         
five
         
six
      
   

它将产生以下结果-