justify-content: space- around;

justify-content: space-around; 是CSS中的一个属性，用于设置flex容器中子元素的水平对齐方式。具体来说，它会在子元素之间均匀地分配剩余的空间，并在子元素两侧留有相等的空白间距。

这个属性会在子元素之间创建相等的空白间距，同时也会在容器的两侧留出相等的空白间距。这意味着子元素之间的间距和子元素与容器边缘之间的间距是相等的。

下面是一些相关问题：
1. justify-content属性还有哪些取值？
2. flex容器中的子元素是如何排列的？
3. 如何在flex容器中实现子元素的垂直对齐？
4. flex布局中还有哪些常用的属性？

相关问题

justify-content: space-around

`justify-content: space-around` 是 CSS 中的一个属性值，用于指定如何在一个容器中分配元素的水平空间。具体来说，这个属性值会在每个元素之间分配相等的空间，同时在第一个元素之前和最后一个元素之后也会分配相等的空间。

以下是一个示例：

HTML 代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: space-around;
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
}

在这个例子中，`justify-content: space-around` 被应用于 `.container` 容器中。这将在容器内的每个元素之间分配相等的空间，同时在第一个元素之前和最后一个元素之后也会分配相等的空间。

这样，每个元素之间的空间会相等，并且第一个元素和最后一个元素与容器的边缘之间的空间也会相等。

justify-content: space-around;

`justify-content: space-around;`是CSS中的一个属性，用于设置弹性盒子元素在主轴上的对齐方式，使得元素在主轴上均匀分布，且元素与元素之间的间隔相等。具体来说，`space-around`会在每个元素周围创建相等的空间，使得元素之间的间隔相等，同时第一个元素和最后一个元素与容器边缘之间的间隔是其他元素之间间隔的一半。

以下是一个例子，其中有5个子元素，它们的`justify-content`属性被设置为`space-around`：

.container {
  display: flex;
  justify-content: space-around;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #ccc;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

效果如下图所示：