0
198
VistasFlexbox espacio entre pero centro si un elemento
Tengo el siguiente HTML y CSS.
<div class="container-box"> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> </div> .container-box { width: 200px; display: flex; flex-direction: row; justify-content: space-between; background-color: red; margin:50px; } .box { background-color: #9009A0; height: 50px; width: 50px; }Lo que da este diseño:
El primer diseño para varios elementos hace lo que espero, pero ¿cómo puedo cambiar el segundo para colocar el elemento en el centro, ya que solo tiene un elemento?
Vea este codepen: https://codepen.io/dennismadsen/pen/oNvqjjV
3 Respuestas
Responde la pregunta0
Para los casos en los que tiene un elemento en el contenedor, puede usar la pseudoclase :only-child .
Agregue esto a su código:
.box:only-child { margin: 0 auto; } .container-box { width: 200px; display: flex; flex-direction: row; justify-content: space-between; background-color: red; margin: 50px; } .box { background-color: #9009A0; height: 50px; width: 50px; } .box:only-child { margin: 0 auto; } <div class="container-box"> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> </div> En tales casos, los márgenes auto flexibles anularán justify-content porque:
§ 8.1. Alineación con márgenes
autoAntes de la alineación a través
justify-contentyalign-self, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.
Más sobre :only-child :
La
:only-childrepresenta un elemento que no tiene hermanos. Igual que:first-child:last-childo:nth-child(1):nth-last-child(1), pero con una especificidad menor.
Más información sobre los márgenes auto flexibles:
Además, para resaltar algunos comportamientos flexibles interesantes, si estuviera usando space-around en lugar de space-between , no necesitaría márgenes auto .
0
Para obtener información, también podría usar juntos :first-child y :last-child si quisiera tener en cuenta los navegadores muy antiguos;)
.container-box { width: 200px; display: flex; flex-direction: row; justify-content: space-between; background-color: red; margin: 50px; } .box { background-color: #9009A0; height: 50px; width: 50px; } .container-box .box:first-child:last-child { margin: 0 auto; } <div class="container-box"> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> </div>0
Aquí hay una idea diferente con solo margen:
.container-box { width: 400px; display: flex; background-color: red; margin: 30px; } .box { background-color: #9009A0; height: 50px; width: 50px; } .box:first-child { margin-right: auto; } .box:last-child { margin-left: auto; } <div class="container-box"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> </div>Si tendrá más de 3 elementos, puede agregar una regla adicional
.container-box { width: 400px; display: flex; background-color: red; margin: 30px; } .box { background-color: #9009A0; height: 50px; width: 50px; } .box:not(:last-child):not(:first-child) { margin:auto; } .box:first-child { margin-right: auto; } .box:last-child { margin-left: auto; } <div class="container-box"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> <div class="box"></div> </div> <div class="container-box"> <div class="box"></div> </div>