flex布局之justify-content属性详解

1.justify-content属性介绍

对容器进行display: flex布局之后，可通过justify-content来调整容器中子元素整体的布局的位置，其值分别有如下几个：
注：以下情况均由主轴为从左到右方向进行，其从下到上的主轴情况原理类似

• flex-start（默认值）
  即默认状态下的在主轴的左边位置，页面代码如下：

  
  
  


  

    
1
    
2
    
3
  

其效果如下：

justify-content: flex-start效果

• flex-end
  其flex-end则是在主轴的右边位置，效果如下图所示：

justify-content: flex-end效果

• center
  设置为center值之后，其子元素整体的位置则是在主轴的中心位置，其效果如下：

  
  
  justify-content：center效果

• space-around
  该值会将主轴上剩余空间平均的充斥在各个子元素的周围（类似于有相同的margin-left以及margin-right），效果如下图所示：

  
  
  justify-content: space-around效果
• space-between
  space-between与space-around造成的效果类似，稍有不同的为其第一个子项与最后一个和容器直接没有间隔，其效果如下：
  
  justify-content：space-between效果
  
  注其第一个之所以有是因为，我设置的margin-left：10px的原因

自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！