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

admin管理员组

文章数量:1290946

I have a list of items that need to be wrapped as the screen gets smaller. There is another item that proceeds them that needs to be kept a particular space from them, specifically 8px.

The issue is, when they begin wrapping, there is a bunch of space left behind from the element that was wrapped.

All items must have 8px in between them, including the one that does not wrap. How can I make it so that there is no empty space?

Here's a working example:

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=".8.0/umd/react.production.min.js"></script>
<script src=".8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

I have a list of items that need to be wrapped as the screen gets smaller. There is another item that proceeds them that needs to be kept a particular space from them, specifically 8px.

The issue is, when they begin wrapping, there is a bunch of space left behind from the element that was wrapped.

All items must have 8px in between them, including the one that does not wrap. How can I make it so that there is no empty space?

Here's a working example:

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

Note: I have seen similar questions, but none of which address the fact that I need 8px gap between items at all times. The ones I've run into I lose that control. Is there anyway around this?

• javascript
• css
• reactjs
• sass
• flexbox

Share Improve this question Follow asked Mar 15, 2022 at 21:35 theJulstheJuls 7,4701818 gold badges9696 silver badges182182 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4 +50

Using grid instead of flexbox would make it easier, like this:

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

Use CSS grid like below. I removed the react part to keep the demo simple but I didn't touch the HTML structure

.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>

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

Here's a solution using grid which involves stretching the items in order to eliminate the trailing empty space created from wrapping. This approach is a promise if you don't want to work with media queries.

Nevertheless, .container will have two columns: the first has a min-width of 80px and a max-width of 500px; the second has a width of 80px. This grid has a gap of 8px between the columns.

.wrap-container holds the undetermined number of items with 8px gap. The width of each item starts from 80px and can grow up to the remaining space available.

.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;
}

Easy solution would be to just justify-content: space-evenly and then put a padding-left of 8px on the last element...

so have the left side in a div and the right one as well. Than you could just evenly space the elements in the left div and then have the right one static the whole time.

If I have to provide exact code for this to work so you can ninja ctrlCctrlV it, just lemme know :P

本文标签：