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> 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>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>La solución fácil sería simplemente justificar el contenido: espacio uniforme y luego poner un relleno a la izquierda de 8px en el último elemento...
así que tenga el lado izquierdo en un div y el derecho también. Entonces podría espaciar uniformemente los elementos en el div izquierdo y luego tener el derecho estático todo el tiempo.
Si tengo que proporcionar el código exacto para que esto funcione para que puedas ninja ctrlCctrlV, solo déjame saber: P
Aquí hay una solución que usa la cuadrícula que implica estirar los artículos para eliminar el espacio vacío final creado por el envoltorio. Este enfoque es un compromiso si no desea trabajar con consultas de medios.
Sin embargo, .container tendrá dos columnas: la primera tiene un ancho mínimo de 80 px y un ancho máximo de 500 px; el segundo tiene un ancho de 80px. Esta cuadrícula tiene un espacio de 8px entre las columnas.
.wrap-container contiene el número indeterminado de elementos con un espacio de 8 px. El ancho de cada elemento comienza en 80 px y puede crecer hasta el espacio restante disponible.
.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; }