深入了解css justify-content属性

一、基本概念

css justify-content属性定义了在一个容器中，如何将多个子元素沿着主轴进行排列，这决定了子元素在主轴上的对齐方式。

justify-content 可以取多个值，主要有：

• flex-start：子元素排列在容器的开始位置
• flex-end：子元素排列在容器的结束位置
• center：子元素居中对齐
• space-between：子元素平均分布在容器中，第一个子元素在开头，最后一个子元素在结尾
• space-around：子元素平均分布在容器中，两端留有空隙

如果容器只有一行，那么 justify-content 控制的就是水平的对齐方式；如果容器只有一列，则控制的是垂直的对齐方式。

二、实例演示

下面的代码演示了不同的 justify-content 属性值对子元素排列的影响:

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  justify-content: flex-start;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  justify-content: flex-end;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  justify-content: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  justify-content: space-between;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  justify-content: space-around;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 10px;
}

三、掌握小技巧

1、垂直和水平居中对齐是实现FlexBox中 justify-content 和 align-items 的配合的结果，配合使用效果更佳，代码如下：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2、对于宽度不确定的元素，可以使用伸缩属性使它们占用剩余的空间，代码如下：

.parent {
  display: flex;
}

.child {
  flex: 1;
}

3、使用 justify-content:center 可以在主轴上居中对齐，使用 flex-wrap:wrap 可以让元素换行，从而实现多列居中布局，代码如下：

.parent {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

四、总结

通过对 justify-content 属性的深入了解，我们可以更好地实现多种排列方式和对齐方式。同时，我们也可以掌握一些小技巧，来更加高效地使用 justify-content 属性。