css一行显示4个

CSS 是前端开发必备技能之一，而像一行内显示4个元素这样的小技巧更是让网站 UI 更加精美。下面我们就来学习一下如何实现一行显示4个元素：

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

.item {
  width: calc(25% - 10px);
  margin-bottom: 20px;
}

首先我们需要一个容器，利用 CSS 的 flex 布局可以非常便捷地实现。这里我们将容器的 display 属性设置为 flex，并设置 flex-wrap 为 wrap 即可让元素自动换行。而 justify-content 属性则可以控制元素在容器内的排列方式。在这里我们选择 space-between，意为排列在容器的两侧，即左右两端。

其次，在每一个元素上设置 width 属性为 25% 即可让它们平均地铺满整个宽度。同时，设置一个比较适当的 margin-bottom 可以让元素之间有一个间隔，使布局更加美观。

最后，需要注意的是通过 calc() 函数计算出元素宽度时需要减去 margin 的值。这里我们将 margin-bottom 设为 20px，因此元素实际宽度应该为 calc(25% - 10px)。

通过这些简单的 CSS 设置，我们就能够轻松实现一行显示4个元素的布局效果了，不论是在网站首页、产品列表页还是其他页面布局中都可以使用。