css flex布局 一行3个
时间: 2025-02-09 12:02:45 浏览: 89
### 使用 CSS Flex 实现每行三个项目的布局
为了创建一个每行显示三个元素的Flex布局,可以采用如下方式设置父级容器和子项样式:
对于父级容器 `.parent` ,定义 `display: flex` 来启用弹性盒子模型,并通过 `flex-wrap: wrap` 属性允许子元素在必要时换到下一行[^2]。
```css
.parent {
display: flex;
justify-content: flex-start; /* 对齐方式 */
flex-wrap: wrap; /* 允许换行 */
}
```
针对每一个子元素 `.child` 设置宽度为计算后的值 `calc((100% - 10px) / 3)` 。这里假设每个项目之间有5像素间距,则总共需要减去两个边距之和即10像素再平均分配给三个子元素。另外需要注意的是,在第三个项目之后不应该存在右边距,因此利用伪类选择器 `:nth-child(3n)` 移除这些特定位置上的右外边距。
```css
.child {
width: calc((100% - 10px) / 3);
margin-bottom: 5px;
margin-right: 5px;
min-width: 68px;
min-height: 28px;
background: var(--bg-2);
border-radius: 8px;
&:nth-child(3n) {
margin-right: 0;
}
}
```
此配置能够确保即使窗口大小发生变化,每一行仍然保持最多容纳三个子元素的同时维持良好的视觉效果。
阅读全文
相关推荐



















