Chromium llega a la brecha de Flexbox

La propiedad gap de CSS está aquí para los motores Flexbox de CSS y los motores de diseño de varias columnas de Chromium.

Adam Argyle

David Grogan

Brecha de CSS

gap es relativo al flujo, lo que significa que cambia de forma dinámica según la dirección del flujo de contenido. Por ejemplo, gap se ajustará automáticamente a los diferentes valores de writing-mode o direction que establezcas para los usuarios internacionales. Esto facilita en gran medida la carga de los desafíos de espaciado para el componente y el autor de CSS. Menos escalamiento de código.

Compatibilidad del navegador

Uso

gap acepta cualquier longitud o porcentaje de CSS como valor.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

Se puede pasar 1 longitud para el espacio, que se usará para la fila y la columna.

.grid {
  display: grid;
  gap: 10px;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

Se pueden pasar 2 longitudes de espacio, que se usarán para la fila y la columna.

.grid {
  display: grid;
  gap: 10px 5%;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

Antes de que gap estuviera en Flexbox, las estrategias incluían márgenes negativos, selectores complejos, selectores de seudoclase :last o :first, o bien otros medios para administrar el espacio de un conjunto de elementos secundarios diseñado y unido dinámicamente.

Intentos anteriores

Los siguientes son patrones que las personas usaron para obtener espacios similares a los espacios en blanco.

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

Sin embargo, lo anterior no reemplaza por completo a gap y, a menudo, necesita ajustes de @media o :lang() para tener en cuenta situaciones de unión, modos de escritura o dirección. Agregar una o dos consultas de contenido multimedia no parece tan malo, pero pueden sumarse y generar una lógica de diseño complicada.

Lo que realmente pretendía el autor anterior era que ninguno de los elementos secundarios se tocara.

El antídoto: brecha

.layout {
  display: flex;
  gap: 10px;
}

En los primeros 2 ejemplos (sin Flexbox gap), los elementos secundarios se segmentan y se les asigna espaciado de otros elementos. En el ejemplo de intervalo de antídoto, el contenedor es propietario del espaciado. Cada hijo puede liberarse de la carga y, al mismo tiempo, centralizar la propiedad del espaciado. Simplificar la coherencia Reordenar, cambiar viewports, quitar elementos, agregar elementos nuevos, etc., y el espaciado será coherente. Sin selectores nuevos ni consultas de medios nuevas, solo espacio.

Actualizaciones de Herramientas para desarrolladores de Chromium

Con estas actualizaciones, se incluyen cambios en las Herramientas para desarrolladores de Chromium. Observa cómo el panel Styles ahora controla grid-gap y gap 👍

DevTools admite grid-gap y gap, ya que gap es, en esencia, un alias de las sintaxis anteriores.

Nuevo potencial de diseño

Con Flexbox gap, desbloqueamos más que la conveniencia. Desbloqueamos diseños intrínsecos, potentes y perfectamente espaciados. En el video y la siguiente muestra de código a continuación, Grid no puede lograr el diseño que puede lograr Flexbox. La cuadrícula debe tener filas y columnas iguales, incluso si están asignadas de forma intrínseca.

Además, observa lo dinámico que es el espaciado entre los elementos secundarios cuando se unen de forma intrínseca de esa manera. Las consultas de medios no pueden detectar ese tipo de unión para realizar ajustes inteligentes. Flexbox gap puede hacerlo y lo hará por ti en todas las internacionalizaciones.

gap de varias columnas

Además de que Flexbox admite la sintaxis gap, los diseños de varias columnas también admiten la sintaxis gap más corta.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

¡Fantástico!