El cromo aterriza en la brecha de Flexbox

Mencioné esto el otro día a través de la cobertura de Michelle Barker, pero aquí lo vincularé al anuncio oficial. Lo principal es que lo obtendremos gapcon flexbox, lo que significa:

.flex-parent {  display: flex;  gap: 1rem;}.flex-child {  flex: 1;}

Eso es excelente, ya que dejar espacio entre los elementos flexibles ha sido difícil en el pasado. Tenemos justify-content: space-between, lo cual es bueno a veces, pero eso no le permite decirle explícitamente al contenedor flexible cuánto espacio desea. Por eso, normalmente usaríamos margin, pero eso significa evitar establecer el margen en el primer o último elemento dependiendo de la dirección del margen, lo cual es molesto y se vuelve complicado.

Tenemos gapCSS Grid y es mucho mejor. Es genial tenerlo en flexbox.

Pero se pondrá raro por un minuto. Safari aún no lo admite (ni Chrome estable), por lo que no podemos simplemente dejarlo disponible y esperar que funcione con flexbox. ¿Pero no deberíamos poder hacer una @supportsconsulta en estos días?

/* Nope, sorry. This "works" but it doesn't    actually tell you if it works in *flexbox* or not.   This works in grid in most browsers now, so it will pass. */@supports (gap: 1rem) {  .flex-parent {     gap: 1rem;  }}

Eso se volvió extraño porque grid-gapse eliminó un favor de solo gap. Estoy seguro de grid-gapque recibirá soporte para siempre porque generalmente así es como funcionan estas cosas, pero se nos recomienda usarlo gapen su lugar. Entonces, se podría decir que la brecha está un poco sobrecargada, pero eso debería desaparecer con el tiempo (¿un año? ). Es un poquito más complicado por el hecho de que ahora también column-gaplo será. tiene un montón de trabajos.gapgap

Yo diría que sigo a favor del cambio, a pesar de la sobrecarga. Los modos mentales más simples son importantes a largo plazo, y no hay nada que desafíe un CSS para el estilo en el navegador. Apuesto a que mi hija de 2 años escribe algo de CSS durante su vida.

Enlace directo →