Tengo 5 cuadrados en línea bajo un padre flexible. Cuando se hace clic en el botón, se elimina el primer cuadrado. Cada vez que se elimina el primer cuadrado, los cuadrados que siguen se empujan hacia la izquierda por el ancho de un cuadrado (como era de esperar). ¿Es posible hacer que los otros cuadrados mantengan su posición cuando esto sucede (es decir, se quedan donde estaban antes en lugar de moverse hacia la izquierda)?
Una forma que se me ocurre de hacerlo es colocando absolutamente cada elemento cuadrado. Pero, ¿es esa la única forma de evitar que los cuadrados se muevan?
Nota : me gustaría que los cuadrados mantuvieran sus posiciones si tuviera que eliminar también el último cuadrado; así que algo como justify-content: flex-end no funcionará para mis necesidades porque no funcionará para ambos casos.
Nota 2 : visibility: hidden u opacity: 0 tampoco funcionará para mis necesidades porque necesito eliminar el elemento cuadrado. También planeo agregar otro elemento cuadrado más adelante y no me gustaría que el diseño cambie. es posible?
Consulte el violín para ver un ejemplo.
$('.click-me').on('click', function() { // Remove the first square. $('.main').children().first().remove(); }); .main { position: relative; display: flex; margin-top: 20px; } .main span { width: 35px; height: 35px; background-color: #2e852e; border: 1px solid #000; } .main .square1, .main .square5 { background-color: #a5a551; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="click-me">Click Me!</button> <div class="main"> <span class="square1"></span> <span class="square2"></span> <span class="square3"></span> <span class="square4"></span> <span class="square5"></span> </div>ACTUALIZADO : puede usar el enfoque de grid y combinarlo con el uso de CSS variables . Establezca la variable CSS de estilo en línea con el índice del elemento cuadrado y luego utilícela en CSS, para tener la posición de estos cuadrados en la cuadrícula principal. En este caso, puede eliminar cualquiera de los elementos secundarios y todos los demás mantendrán sus posiciones.
$('.click-me').on('click', function() { // Remove the first square. $('.main').children().first().remove(); }); .main { position: relative; display: grid; grid-template-columns: repeat(5, 35px); /* create grid with 5 columns */ margin-top: 20px; } .square { /* make it flex and align it's content */ display: flex; align-items: center; justify-content: center; /* make it square flexible element */ width: 100%; aspect-ratio: 1/1; background-color: #2e852e; border: 1px solid #000; color: #fff; /* using index of element, taken from inline styles, "auto" - callback */ grid-column-start: var(--sq-index, auto); } .square--active { background-color: #a5a551; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="click-me">Click Me!</button> <div class="main"> <span class="square square--active" style="--sq-index: 1;">1</span> <span class="square" style="--sq-index: 2;">2</span> <span class="square" style="--sq-index: 3;">3</span> <span class="square" style="--sq-index: 4;">4</span> <span class="square square--active" style="--sq-index: 5;">5</span> </div> <div class="main"> <span class="square" style="--sq-index: 2;">2</span> <span class="square" style="--sq-index: 4;">4</span> <span class="square square--active" style="--sq-index: 5;">5</span> </div> <!-- Example of using "auto" callback. Defined index of first child element, all next siblings will be placed automatically --> <div class="main"> <span class="square" style="--sq-index: 3;">3</span> <span class="square">4</span> <span class="square square--active">5</span> </div>