Patrones de Flexbox La última biblioteca de códigos de Flexbox de CSS
La propiedad más reciente de CSS Flexbox ha cambiado radicalmente la forma en que los desarrolladores crean interfaces. No más floats y hacks CSS para alinear los diseños perfectamente. No se preocupe más por las técnicas de respuesta personalizadas para manejar diseños de varias columnas.
Pero aunque flexbox resuelve muchos problemas, también es complicado de aprender. Para ayudarlo a comenzar, hay una nueva biblioteca en línea llamada Flexbox Patterns que cataloga muchos elementos diferentes de flexbox en una ubicación central.
Esta biblioteca es de uso completamente gratuito y está disponible en GitHub. Todos los ejemplos pueden ser descargado localmente a través de NPM o a través de GitHub. Pero también puede navegar los ejemplos a través del sitio web para copiar y pegar códigos según sea necesario..
Cada patrón tiene su propia página con una breve descripción y ejemplos de código. Puedes bastante literalmente Copia y pega los códigos en tu proyecto web existente, aunque se recomienda que primero aprendas un poco sobre lo que hace el código y por qué lo estás usando.
Tomemos, por ejemplo, la demostración de la barra de encabezado del sitio usando flexbox para alinear todos los elementos en una barra de navegación superior de lado a lado.
Normalmente, esto requeriría flotadores y una clase de clearfix para alinear todo correctamente.
Con flexbox puede guardar todo en un contenedor usando el pantalla: flex propiedad. De esta manera usted puede Definir cómo deben interactuar los elementos. entre sí y cómo el flexbox debe funcionar en pantallas más pequeñas.
Los patrones se actualizan constantemente y la biblioteca actual se centra en los elementos más comunes, como pestañas, barras laterales y centrado vertical / horizontal.
Si eres nuevo en flexbox entonces definitivamente echa un vistazo a Flexbox Patterns. El sitio no le enseñará todos los conceptos básicos de flexbox, pero ofrecerá ejemplos reales que puede probar para sus propios proyectos web..
