Construye diseños complejos con PostCSS-FlexBox

Sep 14, 2025

Cómo

[dieciséis]

FlexBox es una gran herramienta para reducir la hinchazón CSS, y tiene un poco de azúcar incorporado para lidiar con cosas como la Orden y la alineación de FUENTES. Pero no ofrece ayuda para hacer las matemáticas que crea tamaños de columna y canal. Como muchos expertos declaran repetidamente: FlexBox es agradable, pero no es un sistema de cuadrícula.

Deberíamos usar FlexBox, pero no debemos tirar los conceptos básicos detrás de los sistemas de cuadrícula que nos sacaron de la 'era de geocidades' del diseño:

Hacer columnas proporcional a algo
Use canaletas consistentes a lo largo de su diseño

Podemos usar uno de los muchos sistemas de cuadrículas de FlexBox por ahí, pero en toda honestidad, los estilos detrás de estos son en su mayoría iguales que las rejillas a base de flotadores. Los autores solo agregan Pantalla: Flexión al contenedor, junto con algunas clases auxiliares que ofuscan las propiedades de FlexBox (por ejemplo, una clase como .grid-vertical-align-mid es una ofuscación de Alinee-Artículos: Centro ).

La única diferencia es que ahora las columnas están 'flexionadas', lo que significa que tenemos ese azúcar que mencioné anteriormente. Pero esto aún no resuelve los principales problemas que enfrentan las cuadrículas hoy: los sistemas de cuadrícula aún salen una tonelada de hinchazón de CSS, y las rejillas siguen siendo aburridas.

25 plantillas de sitio web de primera clase

El problema con las cuadrículas.

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use

Los autores de la red generalmente distribuyen enormes paquetes de CSS que pueden compensar, ordenar, alinear y cambiar el tamaño de acuerdo con un tamaño de dispositivo arbitrario. Confían en GZIP para mitigar algunos de los daños, pero esto no lo consigue todo. ¿Qué pasa si no necesita esas características adicionales?

Suponiendo que el marco que actualmente está utilizando las ofertas de la red Mixins, la mejor solución podría ser para conocer esas y componer sus propias columnas. Esto produce poco hinchazón, pero limita sus cuadrículas a las fracciones y no le ofrece mucha movilidad entre diferentes marcos.

En el segundo problema. Los diseñadores se han bloqueado mentalmente para hacer todas sus decisiones basadas en una determinada combinación de columnas igualmente de tamaño. Como resultado, toda la Internet está comenzando a desenfocar juntos en una 'pila en el móvil; 1/12 combinaciones de columnas en cualquier otra cosa 'distopia.

FlexBox introducido crecer flexible , que nos liberó un poco. Ahora podemos configurar los tamaños que se ven bien y rellenen el espacio restante con un elemento estirado, ¡pero las canaletas se alinean de manera consistente a lo largo de la página? ¿Están en mente las áreas de contenido establecidas con cualquier tipo de proporciones, o estamos de vuelta para acosarlo?

Entrar en el dragón

La solución a ambos problemas se envuelve en una función llamada PostCSS-HN. Los complementos POSTCSS se pueden usar con una gama de herramientas de compilación como WEBPACK, GULP o simplemente la línea de comandos. Las hormigas se mezclan a la perfección en CSS liso (o cualquier preprocesador) con una API engañosamente simple que enmascara docenas de alma mental calc fórmulas. Requiere dos parámetros similares a la mezcla para buscar una plétora de tamaños amigables con la rejilla.

Un ejemplo podría hacer que esto sea más claro: ancho: Tamaños (1/2) Obtener (1) devoluciones calc (99.99% * 1/2 - (30px - 30px * 1/2)) . Vamos a romper esto:

Tamaños () es una lista de tamaños separados en el espacio. Estos pueden ser cualquier combinación de una variedad de tamaños: números fijos en forma de longitudes CSS válidas ( px De em De % ) Fracciones o números de flotador (que devuelven lo que sea sobrante, censan números fijos); y auto Las palabras clave (que devuelven el tamaño del tamaño, las fracciones sans y los números fijos)
arrancar() es un índice basado en 1 que obtiene un tamaño amigable con la rejilla de su lista. Asi que Tamaños (1px 2px 3px) Obtenga (2) volvería 2px
los calc La fórmula es un tamaño amigable con la rejilla.

Recibimos el ancho para cada columna en una cuadrícula de dos columnas con un solo canal de 30px entre ellos:

.cuadrícula {
  PANTALLA: FLEX;
  Flex-Wrap: Wrap;
}

.mitad {
  Ancho: Tamaños (1/2) Obtenga (1); / * Devoluciones Calc (99.99% * 1/2 - (30px - 30px * 1/2) * /
  margen-derecha: 30px; / * pone un canal en el lado derecho de cada columna * /
}

.half: nth-niño (2n + 2) {/ * comienza en el segundo elemento y comienza a contar por 2s * /
  margen-derecha: 0; / * Elimina la última canal de cada fila * /
}

Esto ya le da a los diseñadores el poder de usar estos tamaños dondequiera que vean en forma, pero dejemos sumergirnos más profundamente.

Tamaños (100px 1/2) Obtener (1) devoluciones 100px . Lo suficientemente simple, pero ¿por qué necesitaríamos usar hormiga para volver 100px ? Llegaremos a eso en un segundo.

Tamaños (100px 1/2) Obtener (2) devoluciones Calc ((99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Santo cielo. La hormiga es descubrir el tamaño total de los números fijos y luego regresar 1/2 De lo que quede sobresale, en una forma amigable con la rejilla.

Podemos usar estos calc fórmulas para crear una cuadrícula con un 100px columna y dos 1/2 columnas como así (estaré omitiendo el .cuadrícula Estilos para salvar árboles, pero asegúrese de incluirlos en su código):

. FIXED-TAMAÑO {
  Ancho: Tamaños (100px 1/2) Obtener (1); / * Devuelve 100px (Sé que parece tonta pero osos conmigo por un poco más) * /
  margen-derecha: 30px;
}

.mitad {
  Ancho: Tamaños (100px 1/2) Obtenga (2); / * devuelve calc ((99.99% - (100px + (30px * 1)) * 1/2 - (30px - 30px * 1/2)) * /
  margen-derecha: 30px;
}

.half: nth-niño (3n + 3) {
  margen-derecha: 0;
}

Ahora podemos obtener algunos tamaños previamente inalcanzables, pero aún no es súper flexible y puede requerir una gran cantidad de escritura al tratar con muchos tamaños.

PREPROCESSOR BOOPING

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row

Los preprocesadores y POSTS no siempre se llevan bien, especialmente cuando la sintaxis personalizada está involucrada. Afortunadamente, la API de Ant de Ant Praquivrocessor. Podemos usar un POSTCS-Poster, como PostCSSS-SCSS con un complemento PREPSS, pero este enfoque utiliza muchos complementos de POSTCS de POSTCS inacabados / no inmintados que simulan la funcionalidad de SASS ". He encontrado que el mejor flujo de trabajo es:

Use un preprocesador rápido como el nodo-sass para ver in.scss a out.csss
Usa PostCSS para ver out.csss a final.css
& lt; link & gt; a final.css En tu marcado

Esto le da la mejor sintaxis de preprocesador con todos los complementos PostCSS, su corazón desea.

Ahora para las cosas geniales. Los preprocesadores suelen tener una manera de hacer un bucle un número específico de veces al tiempo que proporciona un iterador:

 @Por $ I de 1 a 3 {
  Contenido: $ i; // devuelve contenido: 1; Contenido: 2; Contenido: 3;
}

Con un poco de conocimiento de los preprocesadores, puede comenzar a usar hormigas en formas realmente interesantes ...

 $ Tamaños: 100px 1/2 1/2;
$ Gutter: 30px;
$ longitud: longitud ($ tamaño);

.curumn {
  Margen-derecha: $ canal;

  @for $ i de 1 por $ longitud {
    & amp;: nth-niño (# {$ longitud} n + # {$ i}) {
      Ancho: Tamaños ($ tamaño) Obtenga ($ i) canal ($ GUTTER);
    }
  }

  & amp;: nth-niño (# {$ longitud} n + # {$ longitud}) {
    margen-derecha: 0;
  }
}

Ahora nuestras columnas de tamaño irregularmente se envuelven a nuevas filas sin un marcado adicional. Sigue adelante y jugueteando con este código. Intente variar tamaños, canaletas y agregar nuevos tamaños (como 100px AUTO 100PX).

Este es un patrón bastante común con hormiga, por lo que lo he envuelto en una propiedad que también funciona con Vanilla CSS:

 .grid {
  Generar cuadrícula: tamaños (100px 1/2 1/2); / * Puede pasar opciones adicionales, pero no se necesita arrancar (). * /
}

Muchas opciones

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible

Las redes de NTH son excelentes cuando conoce el tamaño y el número de elementos que se deben pasar, pero a veces querrás crear un contenedor y simplemente descargar algunos elementos de tamaño al azar allí. En estos casos, margen negativo Las redes son tu mejor apuesta. Simplemente pase margen negativo a hormiga así:

 .grid {
  Margen: 0 -15px;
}

.curumn {
  Ancho: Tamaños (1/3) Obtenga (1) cuadrícula (margen negativo);
  Margen: 0 15px;
}

Conclusión

Estos ejemplos fueron solo un pequeño vistazo a todas las cosas frescas PostCSS-ANT pueden hacer. Tiene un par de parámetros más opcionales y un montón de manejo de errores descriptivo, pero la verdadera poder de las hormigas es usted.

Las herramientas 'tontas' que simplemente devuelven un poco de datos son siempre las mejores herramientas, ya que ponen el poder de nuevo en las manos del desarrollador. Eso es lo que se diseñó PostCSS-ANT. Si estás intrigado, diríjase a corysimmons.github.io/postcss- Para algunas demostraciones de fusión facial y documentos dulces.

Este artículo se publicó originalmente en la emisión 286 de la revista Net, Comprarlo aquí.

Artículos relacionados:

¿Por qué el diseño web necesita expertos en ux?
10 mejores libros de diseño web para Navidad 2016
3 herramientas principales para probar el rendimiento web

Construye diseños complejos con PostCSS-FlexBox

El problema con las cuadrículas.

Entrar en el dragón

PREPROCESSOR BOOPING

Muchas opciones

Conclusión

Cómo - Artículos más populares

Cómo dibujar una cabeza: una guía completa

Cómo hacer un meme en Photoshop

Comienza con Grav CMS

Cómo ocultar su código JavaScript de Ver Fuente

Comienza con RedUX Thunk

Entornos maestros a gran escala en 3DS MAX

Haz un GIF animado en Photoshop

Cómo dominar el arte 3D Fan

Categorías