La peculiar magia de flexbox y auto márgenes | Programar Plus

En el desarrollo de front-end, a menudo hay momentos en los que sé que no sé algo. Puede que sepa lo suficiente para saber qué CSS buscar, pero no tengo ni idea de cómo usarlo o cuál es la sintaxis correcta. De alguna manera, en mi cabeza, parece haber un archivador que está completamente vacío, y cuando trato de buscar algo, todo lo que encuentro es una nota adhesiva casi ilegible.

Un tema como este (que es un área que siempre he sabido pero que nunca entendí realmente) es cómo interactúan los márgenes automáticos y la caja flexible entre sí.

Tome este ejemplo, por ejemplo:

.parent {
  display: flex
}

.child {
  margin: auto;
}

¿Qué hace esto de nuevo? Creo recordar que hay un montón de cosas ingeniosas que puedes hacer con él, y a principios de esta semana, las recordaba a medias después de leer una excelente publicación de Sam Provenza de hace un tiempo que muestra cómo los márgenes automáticos y la caja flexible funcionan juntos. Pero todavía no entendí el concepto incluso después de leer esa publicación, y no fue hasta que comencé a hacer mis propias demostraciones que comenzó a hacer clic.

En esa publicación, Sam describe cómo margin: auto Impacta elementos flexibles como este:

Si aplica márgenes automáticos a un elemento flexible, ese elemento extenderá automáticamente su margen especificado para ocupar el espacio adicional en el contenedor flexible, según la dirección en la que se aplique el margen automático.

Analicemos eso un poco y digamos que tenemos un div padre simple con un div hijo dentro de él:

<div class="parent">
  <div class="child"></div>
</div>

Y supongamos que estamos usando el siguiente CSS para diseñar esos divs:

.parent {
  display: flex;
  height: 400px;
  background-color: #222;
}

.child {
  background-color: red;
  width: 100px;
  height: 100px;
}

El resultado es algo como esto:

Vea Pen margin-auto: # 1 de Robin Rendle (@robinrendle) en CodePen.

Cuando agregamos margin-left: auto al .child elemento así:

.child {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-left: auto;
}

… entonces veremos esto en su lugar:

Vea Pen margin-auto: # 2 de Robin Rendle (@robinrendle) en CodePen.

Extraño, ¿eh? El margen de la izquierda empuja al padre para que el niño se acurruque en la esquina más a la derecha. Pero se vuelve un poco más extraño cuando establecemos todos los márgenes en auto:

.child {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: auto;
}

Vea Pen margin-auto: # 3 de Robin Rendle (@robinrendle) en CodePen.

Es como si estuviéramos usando un truco de centrado popular al configurar justify-content y align-items a center porque el niño decide descansar en el centro del padre, tanto horizontal como verticalmente. Del mismo modo, si establecemos margin-left y margin-top a auto, luego podemos dejar que el elemento flexible se empuje hacia la parte inferior derecha del padre:

Vea Pen margin-auto: # 4 de Robin Rendle (@robinrendle) en CodePen.

Cuando Sam dice, “ese artículo extenderá automáticamente su margen especificado para ocupar el espacio adicional en el contenedor flexible”, la forma en que mi cerebro de archivador vacío interpreta eso es así:

Establecer el margin propiedad en un niño flexible empujará al niño lejos de esa dirección. Colocar margin-left a auto, el niño empujará a la derecha. Colocar margin-top a auto y el niño empujará hasta el fondo.

Después de escribir eso, me suena tan obvio que es casi una tontería, pero a veces eso es lo que se necesita para conseguir un nuevo concepto que se me quede en mi gran y tonta cabeza esponjosa.

¿Por qué es útil saber esto? Bueno, creo que hay algunos momentos en los que justify-self o align-self Es posible que no obtenga exactamente lo que desea en un diseño en el que el uso de márgenes automáticos le brinda esa flexibilidad adicional para ajustar las cosas. Muchas de las demostraciones que he visto, incluidas las que hizo Sam para su publicación original, parecen ser principalmente para alinear elementos de navegación en un menú. Por lo tanto, empujar un elemento en ese menú hacia la parte inferior o extrema derecha de un padre flexible es ciertamente útil en esos escenarios.

De todos modos, creo que es importante recordar este extraño truco, por si acaso.

(Visited 5 times, 1 visits today)