javascript - 使用 flex-wrap 包裹元素后删除右侧的额外空间，同时保持元素之间的相等间距

Question

随着屏幕变小，我有一个需要包装的元素列表。
还有另一个元素需要与它们保持特定的空间，特别是 8px。
问题是，当它们开始包装时，被包装的元素留下了一堆空间。
所有元素之间必须有 8 像素，包括不换行的元素。我怎样才能做到没有空白？
这是一个工作示例:

const App = () => {

  return (
    <div>
      <p>see the items below, regardless of how many I have, I need to hide whatever doesn't fit on the line screen.</p>
      <p>All items need to have 8px gap in between them, including the green one which does not wrap.</p>
      <h5>How can this be done?</h5>
      <div className="container">
        <div className="wrap-container">
          {Array.from({ length: 100 }).map((_, index) => <div className="item" key={index}>{index}</div>)}
        </div>
        <div className="non-wrap-item"> I need to be 8px from the last visible item</div>
      </div>
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: flex;
}

.wrap-container {
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  height: 80px;
  overflow: hidden;
  gap: 8px;
  
  border: 1px solid red;
  margin-right: 8;
}

.item {
  width: 80px;
  height: 80px;
  background-color: blue;
  color: white;
}

.non-wrap-item {
  width: 80px;
  height: 80px;
  background-color: green;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

注意:我见过类似的问题，但没有一个能解决我在任何时候都需要元素之间有 8px 间隙的事实。我遇到的那些我失去了控制。有没有办法解决？

Answer 1

使用 grid而不是 flexbox会更容易，像这样:

const App = () => {

  return (
    <div>
      <p>see the items below, regardless of how many I have, I need to hide whatever doesn't fit on the line screen.</p>
      <p>All items need to have 8px gap in between them, including the green one which does not wrap.</p>
      <h5>How can this be done?</h5>
      <div className="container">
        <div className="wrap-container">
          {Array.from({ length: 100 }).map((_, index) => <div className="item" key={index}>{index}</div>)}
        </div>
        <div className="non-wrap-item"> I need to be 8px from the last visible item</div>
      </div>
    </div>
  )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: grid;
  grid-template-columns:1fr 80px;
  gap: 8px;
  /* if you want some max-width, put it here instead*/
  max-width: 500px;
}

.wrap-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px,1fr));
  gap: 8px;
}

.item {
  height: 80px;
  background-color: blue;
  color: white;
}

.non-wrap-item {
  height: 80px;
  background-color: green;
  color: white;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>