Chromium llega a la brecha de Flexbox

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

Adam Argyle

David Grogan

Brecha de CSS

Término clave: gap es el espaciado entre elementos secundarios. Es posible que hayas oído que este tipo de espaciado se denomina “medianiles” o “callejones”. Es el espacio solo donde se tocan los bordes de las cajas secundarias.

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 para los diferentes valores de writing-mode o direction que establezcas para tus usuarios internacionales. Esto alivia significativamente la carga de los desafíos de espaciado para el autor del componente y de CSS. Menos código para escalar aún más.

Brecha que demuestra la compatibilidad con la localización, ya que controla los cambios en la dirección y el modo de escritura: Codepen | Tweet

Compatibilidad del navegador

Browser Support

• 57
• 16
• 52
• 10.1

Source

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;
}

El espacio se puede pasar con 1 longitud, que se usará tanto para la fila como para la columna.

Abreviatura

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

Establece filas y columnas juntas a la vez.

Expandido

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

El parámetro gap puede recibir 2 longitudes, que se usarán para la fila y la columna.

Abreviatura

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

Configura filas y columnas por separado a la vez

Expandido

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

Flexbox gap

Antes de que gap se incluyera en Flexbox, las estrategias involucraban márgenes negativos, selectores complejos, gap o selectores de seudoclase de tipo :first, o bien otros medios para administrar el espacio de un conjunto de elementos secundarios que se disponen y ajustan dinámicamente.:last

Intentos anteriores

A continuación, se muestran patrones que las personas han usado para obtener un espaciado similar al de un espacio.

Selectores de seudoclase

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

Búho lobotomizado

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

Fuente

Sin embargo, los elementos anteriores no reemplazan por completo a gap y, a menudo, necesitan ajustes de @media o :lang() para tener en cuenta los casos de ajuste, los modos de escritura o la dirección. Agregar una o dos consultas de medios no parece tan malo, pero pueden acumularse y generar una lógica de diseño complicada.

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

El antídoto: brecha

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

Nota: La propiedad del espaciado cambia del elemento secundario al principal

En los primeros 2 ejemplos (sin Flexbox gap), los elementos secundarios se segmentan y se les asigna un espaciado con respecto a otros elementos. En el ejemplo de brecha de antídoto, el contenedor posee el espaciado. Cada hijo puede aliviar la carga y, al mismo tiempo, centralizar la propiedad del espaciado. Simplifica la coherencia. Reordenar, cambiar los puertos de visualización, quitar elementos, agregar elementos nuevos, etc., y el espaciado sigue siendo coherente. No hay nuevos selectores ni nuevas consultas de medios, solo espacio.

Actualizaciones de las Herramientas para desarrolladores de Chromium

Con estas actualizaciones, se producen cambios en las Herramientas para desarrolladores de Chromium. Observa cómo los controladores grid-gap y gap del panel Estilos ahora funcionan 👍.

Las Herramientas para desarrolladores muestran grid-gap y gap, con gap que se muestra debajo de grid-gap para permitir que la cascada use la sintaxis más reciente.

Herramientas para desarrolladores admite grid-gap y gap, ya que gap es, básicamente, un alias de las sintaxis anteriores.

Nuevo potencial de diseño

Con Flexbox gap, obtenemos más que conveniencia. Desbloqueamos diseños intrínsecos potentes y perfectamente espaciados. En el video y el siguiente ejemplo de código, se muestra que Grid no puede lograr el diseño que sí puede Flexbox. La cuadrícula debe tener la misma cantidad de filas y columnas, incluso si se asignan de forma intrínseca.

Tuit

Además, observa lo dinámico que es el espaciado entre los elementos secundarios cuando se ajustan de forma intrínseca de esa manera. Las consultas de medios no pueden detectar el ajuste de texto de esa manera 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;
}

Es genial.