Flexbox es un modelo de diseño que permite que los elementos se alineen y Distribuir espacio dentro de un contenedor. Uso de anchos y alturas flexibles, Los elementos se pueden alinear para llenar un espacio o distribuir espacio entre elementos, lo que lo convierte en una gran herramienta para usar para un diseño receptivo Sistemas.
Flexbox ha existido desde 2009, y está comenzando a ser ampliamente compatible con todos los navegadores modernos. Si observa FlexBox en ¿puedo usar? Verá que tiene un gran soporte en todos los ámbitos.
Hay algunos problemas en IE8 e IE9, pero eso es de esperar. En Brolik, implementamos un sistema de retroceso utilizando un Hoja de estilo sass y un archivo JavaScript File Para tener en cuenta estos navegadores más antiguos.
También usamos la función Compass @Include para obtener prefijos de navegadores específicos, que puede encontrar en este || 71 Sass style sheet . La línea en la parte superior "$ FlexBox-Support-umbral: -3;" es apoyar el Últimas tres versiones de Flexbox, que es ideal para hacia atrás Compatibilidad.
Obviamente, no dude en usar estos tres archivos en sus propios sitios web. Tenga en cuenta que usamos Compass para compilar nuestro sass.
Cuando no usar FlexBox
Antes de hablar sobre cuán útil es FlexBox, quiero tocar cuando Flexbox exagera las cosas.
No Use FlexBox para el diseño de la página. Una cuadrícula básica El sistema que usa porcentajes, anchos máximos y consultas de medios es mucho más segura Enfoque para crear diseños de página receptivos. Óptimamente usarías un Sistema de cuadrícula junto con FlexBox para lograr el más receptivo sitio web. Además, porque el diseño de Flexbox depende del Contenido, los problemas pueden surgir a medida que se carga la página. Jake Archibald tiene un buen blog Explicando por qué es una mala idea usar FlexBox para el diseño general de la página.
No Agregar pantalla: Flex; a cada contenedor Div. Pregúntese si Flexbox realmente resuelve una alineación, escala o problema de pedido que no se puede resolver de una manera más simple con CSS básico.
no Use flexbox si tiene mucho tráfico desde IE8 e IE9. Mientras hay respuestas (vinculadas anteriormente), la experiencia no se verá igual.
Cuando usar FlexBox
Personalmente, Me gusta usar Flexbox para algunas cosas principales: escala, verticalmente y alineando horizontalmente y reordenando elementos dentro de un contenedor. Estos se usan mejor en los componentes de la página dentro de un elemento principal. Allá son muchos otros usos para FlexBox, como cambiar la dirección de un columna o fila. Pero honestamente, prefiero usar quirúrgicas y anchos basados en porcentaje para crear columnas y filas. A continuación, lo haremos Examine la escala, la alineación, el pedido y la envoltura con algunos CSS FlexBox Consejos y ejemplos de CodePen.
Escalado
FlexBox es inherentemente bueno para escalar dinámicamente elementos. Estaba muy emocionado La primera vez que puse la pantalla: Flex; en un elemento principal y vi al niño Los elementos forman una buena cola ordenada con alturas coincidentes.
Consulte el bolígrafo Escalación de FlexBox por Alex Caldwell ( @acaldy =) en CodePen ||– 94 .
Matching heights vertically used to be somewhat difficult and would require jQuery after the page loaded. Now flexbox handles the vertical height and floats by default. It’s one of my favorite features of flexbox because I love orderly grids. The align-items property in flexbox defaults to “stretch,” which leads me into my favorite feature of flexbox.
Alineación vertical
Puede alinear verticalmente todos los elementos infantiles con los elementos alineados Propiedad en el contenedor principal configurándolo en Flex-Start, Flex-End, centro, línea de base o estiramiento (el valor predeterminado). Alternativamente, puede alinear Elementos infantiles individuales con la propiedad Alinee-Self. Debajo de usted Ver estas propiedades ilustradas. Dejé estirarse porque es lo que Naturalmente sucede en el primer ejemplo.
Consulte el bolígrafo FlexBox Alinear vertical por Alex Caldwell ( @acaldy ) en CodePen ||– 104 .
Horizontal alignment
Además, Puede alinear horizontalmente los elementos configurando el contenido de justify propiedad para iniciar flexión, flash-end, centro, espacio entre o espacial. Me gusta usarlo para crear menús receptivos que comienzan En los tamaños de escritorio.
Vea el bolígrafo FlexBox Alineado horizontal por Alex Caldwell ( @acaldy =) en CodePen =. || 114
The space-between property is particularly useful when you want to craft a responsive menu that fills the entire width of a desktop browser, like we did with the la lógica de izquierda a derecha y de arriba a abajo. Dicho esto, Hay algunos casos en los que eso no funciona dentro de un sistema de diseño, y, por lo tanto, ordenar es una herramienta realmente útil para el diseño receptivo.
Ordering
Generally, I think that website hierarchy should naturally fall in the logical left to right and top to bottom order. With that being said, there are some instances when that doesn’t work within a design system, and therefore ordering is a really useful tool for responsive design.
Por ejemplo, me gusta usar el diseño Zig-zag en bloques de contenido que contienen una imagen y alguna copia. Es bueno para alentar a un usuario a desplazarse por la página y extraer rápidamente el información. Eventualmente te quedas sin espacio horizontal como el ancho de El navegador se encoge y desea apilar la imagen sobre el texto. Esto es cuando el orden de las propiedades de FlexBox y Flex-Wrap se vuelven útiles.
Consulte el bolígrafo FlexBox Ordening por Alex Caldwell ( @acaldy =) en CodePen || ACT Ancho (cambiar el tamaño de su navegador para Véalo en acción), el contenedor Flex-Parent obtiene la propiedad Flex-Wrap Lo que hace que los elementos infantiles van a dos líneas. Por defecto el niño los elementos siempre intentarán encajar en una línea con el valor predeterminado de Nowrap. Al mismo tiempo, nos movemos .Flex-Image a la primera posición con La orden de la propiedad: -1. El número negativo anula el inherente Orden de origen (1, 2, 3, etc.) y pone .Flex-Image al comienzo de el contenedor principal. En general, es una forma relativamente simple de controlar elementos dentro de un contenedor para el diseño receptivo. .
Using a media query at a 600px browser width (resize your browser to see it in action), the flex-parent container gets the flex-wrap property which makes the child elements go to two lines. By default the child elements will always try to fit on one line with the default value of nowrap. At the same time, we move .flex-image to the first position with the property order:-1. The negative number overrides the inherent source order (1, 2, 3, etc.) and puts .flex-image at the beginning of the parent container. Overall, it’s a relatively simple way to control elements within a container for responsive design.
En conclusión
En Brolik usamos FlexBox en cada proyecto, pero hemos aprendido a usarlo con moderación.
No todos los contenedores o elementos deben tener visualización: Flex; || 132 == debe conocer su proyecto, audiencia y el resultado deseado y el resultado deseado y el resultado y el resultado deseado y Implementar Flexbox en consecuencia. Comprender que aún necesitará Use algunas náuseas para algunos de los navegadores más antiguos, pero es muy emocionante pieza de tecnología y una buena indicación de la evolución de Diseño web moderno.
You must know your project, audience, and the desired outcome and implement flexbox accordingly. Understand that you will still need to use some fallbacks for some of the older browsers, but it’s a very exciting piece of technology and a good indication of the evolution of modern web design.
Si desea alguna práctica con FlexBox, consulte el juego FlexBox Froggy Game para aprender los conceptos básicos de usar FlexBox.