Flexbox 对齐内容空间答案

【问题标题】：Flexbox justify-content spaceFlexbox 对齐内容空间
【发布时间】：2020-12-09 04:58:07
【问题描述】：

我正在使用弹性框为我的产品列表制作布局，但是当我尝试将 justify-content 设置为 space-between 时，它在 4 个项目的情况下效果很好，但对于较少的项目（2 或 3 个）之间的空间它们会增长，那么无论行中的项目数量如何，我如何将项目之间的空间设置为相同？

.productsContainer {
  background-color: $color_1;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product {
  flex-basis: 23%;
  border: 1px solid $color_2;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  margin-bottom: 20px;
}

Screenshot

【问题讨论】：

尝试将其更改为 justify-content: center。

标签： css reactjs sass flexbox

【解决方案1】：

改为：

justify-content: center;

并添加间隙属性：

gap: 10px;

玩弄差距。

【讨论】：

【解决方案2】：

justify-content: space-between;

会将剩余的容器空间分成等宽的块在你的元素之间，你不能设置间距。

我建议尝试使用grid layout 来放置这种卡片。

应该这样做：

.productsContainer {
  background-color: $color_1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 15px;
}

【讨论】：