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. Todos sobre leds e iluminación

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

El cromo aterriza en la brecha de Flexbox

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 gapco

programar

es

https://pseint.es/static/images/programar-el-cromo-aterriza-en-la-brecha-de-flexbox-1483-0.jpg

2024-06-13

 

El cromo aterriza en la brecha de Flexbox
El cromo aterriza en la brecha de Flexbox

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences