当行项目数变化时使用 Flexbox "justify-content: space-between"

Question

目前，我正在使用 Flexbox justify-content: space-between 在集合页面上水平对齐项目。

但是，并非所有集合都有足够的项目来填满一行。在这种情况下，我希望前两个项目与集合页面上的前两个项目处于相同的水平位置，并且有足够的项目来填满一行。

我可以在每个项目上使用边距而不是使用 justify-content: space-between，但我希望有一种方法可以使用 Flexbox 解决这个问题。

.flex-container {
 display: flex;
 justify-content: space-between;
 margin-bottom:10px;
}

.item {
  height:20px;
  width:20px;
  background:red;
}

// some collections pages have enough items to fill a row like this
<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

// other collections pages don't have enough items to fill a row and have this situation
<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

如果不使用大量变通方法，就不可能使用 flexbox。而是使用显示网格。

.flex-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr)
}

.item {
  height:20px;
  width:20px;
  background:red;
}

// some collections pages have enough items to fill a row like this
<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

// other collections pages don't have enough items to fill a row and have this situation
<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
</div>

当行项目数变化时使用 Flexbox "justify-content: space-between"

Using Flexbox "justify-content: space-between" when number of row items varies

html

css

flexbox