justify-content: space-around;
时间: 2024-01-28 10:11:51 浏览: 101
详解解决flex布局的justify-content: space-between对齐方式的一个BUG的两种方法
5星 · 资源好评率100%
`justify-content: space-around;`是CSS中的一个属性,用于设置弹性盒子元素在主轴上的对齐方式,使得元素在主轴上均匀分布,且元素与元素之间的间隔相等。具体来说,`space-around`会在每个元素周围创建相等的空间,使得元素之间的间隔相等,同时第一个元素和最后一个元素与容器边缘之间的间隔是其他元素之间间隔的一半。
以下是一个例子,其中有5个子元素,它们的`justify-content`属性被设置为`space-around`:
```css
.container {
display: flex;
justify-content: space-around;
}
.item {
width: 50px;
height: 50px;
background-color: #ccc;
}
```
```html
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
```
效果如下图所示:
![justify-content: space-around](https://i.imgur.com/7JZJzvL.png)
阅读全文