在使用 flex-wrap 包裹项目后，删除右侧多余的 space，同时保持项目之间的间距相等

Question

我有一个随着屏幕变小需要包装的项目列表。还有另一个项目需要与他们保持特定的 space，特别是 8px。

问题是，当他们开始包装时，包装的元素留下了一堆 space。

所有项目之间必须有 8 像素，包括不换行的项目。我怎样才能做到没有空 space?

这是一个工作示例：

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>

注意：我见过类似的问题，但 none 解决了我始终需要在项目之间留出 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>

Answer 2

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 8 px 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 8 px from the last visible item < /div> <
            /div> <
            /div>
          )
        }


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

.container {
  display: flex;
  gap: 8px;
}

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

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

.non-wrap-item {
  flex: 0 0 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>

Answer 3

使用 CSS 网格，如下所示。我删除了反应部分以保持演示简单，但我没有触及 HTML 结构

.container {
  display: grid;
  max-width: 600px; /* move the max-width here */
  grid-template-columns: repeat(auto-fit, 80px); /* 80px columns */
  column-gap: 8px; /* your gap here */
}

.wrap-container {
  display: grid;
  grid-column: 1/-2; /* take all the column minus the last one (the green will take the last one)*/
  grid-template-columns: inherit; /* inherit the same column configuration */
  column-gap: inherit; /* and same gap */
  grid-template-rows: 80px; /* one row equal to 80px */
  grid-auto-rows: 0; /* all the others row equal to 0 */
  overflow: hidden; 
  outline: 1px solid red;
}
/* no need to define width or height for items*/
.item {
  background-color: blue;
  color: white;
}

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

<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 class="container">
    <div class="wrap-container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
      <div class="item">14</div>
    </div>
    <div class="non-wrap-item"> I need to be 8px from the last visible item</div>
  </div>
</div>

Answer 4

简单的解决方案是 justify-content: space-evenly 然后在最后一个元素上放置一个 8px 的 padding-left...

因此 div 中有左侧，右侧也有。比你可以均匀 space 左边的元素 div 然后让右边的元素一直保持静态。

如果我必须提供确切的代码才能正常工作，以便您可以忍者 ctrlCctrlV 它，请告诉我：P

Answer 5

这是一个使用网格的解决方案，它涉及拉伸项目以消除由包装创建的尾随空白 space。如果您不想使用媒体查询，这种方法是一种妥协。

然而，.container 将有两列：第一列的 min-width 为 80px，max-width 为 500px；第二个宽度为 80px。此网格的列之间有 8px 的间隙。

.wrap-container 保留未确定数量的项目，间距为 8px。每个项目的宽度从 80px 开始，可以增长到剩余 space 可用。

.container, .wrap-container {
  display: grid;
  gap: 8px;
}

.container {
  grid: auto / minmax(80px, 500px) 80px;
}

.wrap-container {
  grid: auto / repeat(auto-fit, minmax(80px, 1fr));
}

.item, .item-2 {
  height: 80px;
  color: white;
}

.item {
  background: blue;
}

.item-2 {
  background: green;
}

在使用 flex-wrap 包裹项目后，删除右侧多余的 space，同时保持项目之间的间距相等

remove extra space on the right after the wrapping of items with flex-wrap, while maintaining equal spacing between items

javascript

css

sass

flexbox

reactjs