Tengo una lista de elementos que deben envolverse a medida que la pantalla se hace más pequeña. Hay otro elemento que los precede que debe mantenerse a un espacio particular de ellos, específicamente 8px.
El problema es que, cuando comienzan a envolver, queda mucho espacio del elemento que se envolvió.
Todos los elementos deben tener 8 píxeles entre ellos, incluido el que no se envuelve. ¿Cómo puedo hacer que no quede ningún espacio vacío?
Aquí hay un ejemplo de trabajo:
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>Nota: He visto preguntas similares, pero ninguna aborda el hecho de que necesito un espacio de 8 px entre los elementos en todo momento. Con los que me he topado pierdo ese control. ¿Hay alguna forma alrededor de esto?
Usar grid en lugar de flexbox lo haría más fácil, así:
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>Use la cuadrícula CSS como se muestra a continuación. Eliminé la parte de reacción para mantener la demostración simple pero no toqué la estructura 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> 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>