Todo sobre las propiedades de flexbox

El concepto detrás de las propiedades de Flexbox es proporcionar al contenedor la capacidad de cambiar automáticamente el ancho, la altura y el orden de sus artículos para llenar mejor el espacio disponible. Esto puede ser realmente útil para acomodar elementos dentro de diferentes tamaños de pantalla y dispositivos. Los elementos se expanden para llenar cualquier espacio libre, o se reducen para evitar un desbordamiento.

CSS Flexbox grid para principiantes

CSS es una de las primeras y más fáciles de aprender en el desarrollo y diseño web, pero no confundas su simplicidad con la falta de características. Tiene una serie de características y capacidades increíbles listas para ser utilizadas, una de ellas es su módulo de diseño relativamente nuevo: las propiedades de Flexbox.

Las propiedades de Flexbox son uno de los diseños más nuevos disponibles para CSS3, y hay mucho que aprender al respecto. Aquí, nos ponemos manos a la obra con el diseño y cómo usarlo. Sin embargo, antes de comenzar, aquí hay un poco de información sobre las propiedades de Flexbox:

¿Qué son los modos de diseño?

En los términos más simples, la cuadrícula CSS Flexbox es un modo de diseño. CSS tiene varios modos de diseño existentes. El modo de diseño de bloque (como display: block) ha existido durante mucho tiempo. Los diseños de bloques son una buena opción para diseñar documentos completos. De hecho, un navegador web trata varios elementos como divs y párrafos como nivel de bloque de forma predeterminada.

Otro modo de diseño común es en línea. La etiqueta fuerte, la etiqueta de entrada y la etiqueta de anclaje son ejemplos de elementos de nivel en línea. Las herramientas para desarrolladores de Google Chrome incluso le permiten ver el "estilo calculado" de un elemento para determinar las propiedades y los valores de CSS que se han aplicado a los elementos no establecidos explícitamente por el desarrollador.

El diseño relativamente nuevo de las propiedades de Flexbox (caja flexible) se ha diseñado como un método más eficiente para diseñar, alinear y distribuir espacio entre los elementos del contenedor, incluso si el tamaño de estos elementos es dinámico o desconocido. De ahí el término 'flexible'.

El concepto de propiedades de Flexbox

Lo más importante sobre las propiedades de Flexbox es que es independiente de la dirección. Mientras que el diseño del bloque es vertical y el diseño en línea es horizontal, Flexbox tampoco lo es. El bloqueo y el funcionamiento en línea funcionan bien en las situaciones correctas, pero carecen de la flexibilidad para admitir aplicaciones complicadas o grandes, particularmente cuando se trata de cambiar la orientación, estirar, encoger, cambiar el tamaño y cambiar las dimensiones de los elementos.

¿Dónde se usan las propiedades de Flexbox?

Al igual que cualquier otro diseño CSS, Flexbox se usa mejor en ciertas situaciones. En particular, es apropiado para diseños y componentes a pequeña escala de una aplicación. Para diseños de mayor escala, un diseño de cuadrícula sería la mejor opción.

¿Por qué se prefiere Flexbox?

Muchos desarrolladores y diseñadores dan preferencia a las propiedades de Flexbox siempre que pueden (¡a veces con demasiada frecuencia!). Esto se debe a que las propiedades de Flexbox son más fáciles de usar; El posicionamiento de los elementos es mucho más simple, por lo que puede obtener diseños más complejos con menos codificación. En otras palabras, simplifica el proceso de desarrollo.

Una guía de propiedades de Flexbox

Ahora que conoce un poco sobre las propiedades de Flexbox y cómo y por qué funciona, aquí hay una guía detallada sobre el diseño. El modelo de diseño está compuesto por un contenedor principal, también llamado 'contenedor flexible'. Los hijos inmediatos de este contenedor se denominan "elementos flexibles".

El diseño ha pasado por varias iteraciones y cambios de sintaxis a lo largo de los años desde que se creó su primer borrador en 2009. La última especificación de Flexbox es compatible con los siguientes navegadores web:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1 o superior

La terminología utilizada en las propiedades de Flexbox

Aquí hay un vistazo a la terminología básica utilizada en el diseño de propiedades de Flexbox:

  • Pantalla: este comando se utiliza para definir el contenedor flexible. Puede estar en línea o bloqueado, dependiendo del También define el contenido flexible para todos los elementos dentro del contenedor. Ejemplo:

.envase (

pantalla: flex; / * o inline-flex * /

)

  • Orden: los elementos flexibles se presentan de acuerdo con el orden de origen de forma predeterminada, pero la propiedad 'orden' puede controlar el orden en que aparecen los elementos dentro del contenedor. Ejemplo:

.articulo (

orden: ;

)

  • Dirección flexible: este orden establece el eje principal, definiendo la dirección en la que los artículos flexibles se colocan dentro del contenedor. Los artículos flexibles se pueden colocar principalmente en direcciones verticales u horizontales. Ejemplo:

.envase (

dirección de flexión: fila | fila inversa | columna | columna inversa;

)

  • Flex-grow: este orden define la capacidad del elemento flexible para escalar automáticamente si tiene espacio. Puede aceptar un valor sin unidades para servir como proporción. Este valor dicta cuánto espacio debe ocupar el artículo dentro del contenedor flexible. Por ejemplo, si todos los artículos tienen un conjunto de crecimiento flexible como 1, el espacio restante dentro del contenedor se distribuirá por igual a todos los niños. Si el valor es 2, el espacio restante ocupará dos veces más espacio que el resto. Ejemplo:

.articulo (

flex-grow:; / * predeterminado 0 * /

)

  • Flex-retráctil: Esto hace exactamente lo contrario que flex-grow, ya que encoge los elementos flexibles cuando es necesario. Ejemplo:

.articulo (

encogimiento flexible:; / * predeterminado 1 * /

)

  • Base flexible: este orden define el tamaño predeterminado de los elementos antes de que se distribuya el resto del espacio. Podría ser una longitud, como 5rem o 20%, o una palabra clave. La palabra clave 'auto' indica que se debe medir el ancho y la altura del elemento, y la palabra clave 'content' indica que el tamaño del elemento se basa en su contenido. Ejemplo:

.articulo (

base flexible: | auto; / * auto predeterminado * /

)

  • Flex: esta es una abreviatura combinada para las tres propiedades anteriores: flex-grow, flex-base y flex-shrink. El valor predeterminado es '0 1 auto'.

.articulo (

flex: ninguno | (||)

)

  • Justificar contenido: este orden define la alineación del eje principal y ayuda a distribuir el espacio libre adicional si queda algo cuando los elementos son inflexibles o han alcanzado su tamaño máximo. Esto también ayuda a controlar la alineación del elemento cuando hay un desbordamiento.

.envase (

justify-content: inicio flexible | extremo flexible | centro | espacio intermedio | espacio alrededor;

)

  • Alinear elementos: se utiliza para definir el comportamiento predeterminado del diseño de elementos flexibles en el eje transversal de la línea actual. Es esencialmente una versión de 'justify-content' en el eje transversal, que es perpendicular al eje principal. Ejemplo:

.envase (

alinear elementos: inicio flexible | extremo flexible | centro | línea de base | tramo;

)

  • Alinear contenido: este orden alinea las líneas del contenedor en caso de que haya espacio adicional en el eje transversal. Es similar a 'justify-content', pero para el eje transversal en lugar del eje principal. Si solo hay una línea de elementos flexibles, esta propiedad no tiene ningún efecto. Ejemplo:

.envase (

alinear contenido: flex-start | extremo flexible | centro | espacio intermedio | alrededor del espacio | tramo;

)

Usar propiedades de Flexbox

Para utilizar el diseño de Flexbox, simplemente puede configurar la propiedad de visualización en el elemento primario HTML, como se muestra a continuación:

.flex-container (

pantalla: -webkit-flex; / * Safari * /

pantalla: flex;

)

Si prefiere mostrar como un elemento en línea, puede escribir:

.flex-container (

pantalla: -webkit-inline-flex; / * Safari * /

pantalla: flex en línea;

)

Solo necesita que esta propiedad se establezca en el contenedor flexible principal y sus elementos flexibles inmediatos. Los niños del contenedor se convertirán automáticamente en artículos flexibles.

Cursos recomendados

  • Curso en línea sobre jQuery gratis
  • Curso en línea sobre Free Angular JS
  • Entrenamiento en línea en Mudbox
  • Entrenamiento de Certificación en Ruby Gratis

Propiedades de Flexbox: propiedades del contenedor Flex

Hay muchas maneras de agrupar las propiedades de Flexbox, y la manera más fácil de aprender sobre ellas es dividiéndolas en propiedades de contenedores y elementos de Flex. Acabamos de cubrir algunas de las propiedades del contenedor flexible anteriores. Veamos el resto:

  • Dirección flexible: fila o columna

La propiedad de dirección flexible se puede establecer como columnas verticalmente o como filas horizontales. Con la dirección de la fila, los elementos flexibles se apilan de izquierda a derecha de forma predeterminada. Row-reverse cambia esta dirección de derecha a izquierda. La dirección de la columna es de arriba hacia abajo de manera predeterminada, y la función de inversión de la columna invierte esto en una dirección de abajo hacia arriba.

  • Flex-wrap: nowrap o wrap

La propiedad flex-wrap controla si los elementos secundarios del contenedor flexible se disponen en líneas múltiples o simples, y la dirección en la que se apilan las nuevas líneas. El valor nowrap ve los elementos flexibles que se muestran en una sola fila, encogidos para ajustarse al ancho del contenedor de forma predeterminada. El valor de ajuste ve los elementos flexibles que se muestran en diferentes filas en una dirección de izquierda a derecha o de arriba a abajo. También puede agregar wrap-reverse para cambiar el orden. El valor predeterminado es nowrap.

  • Flujo flexible

Esta propiedad es básicamente una forma abreviada de establecer las propiedades de dirección flexible y ajuste flexible juntas. El valor predeterminado es 'row nowrap'. Ejemplo:

.flex-container (

flujo flexible: ||

)

  • Justificar contenido

La propiedad justify-content tiene cuatro valores: flex-start para alinear elementos al lado izquierdo del contenedor; extremo flexible para alinear elementos al lado derecho; centro para alinearse con el centro; espacio intermedio para alinear elementos con el mismo espacio entre ellos, con el primer y último elemento alineados con los bordes del contenedor; y espacio para alinear el elemento flexible con el mismo espacio alrededor, incluidos el primer y el último elemento. El inicio flexible es el valor predeterminado.

  • Alinear artículos

Esta propiedad tiene cinco valores: estirar para escalar elementos flexibles para llenar todo el ancho o la altura desde el inicio cruzado hasta el extremo cruzado del contenedor; inicio flexible para apilar elementos en el inicio cruzado; extremo flexible para apilar elementos en el extremo cruzado; centro para alinear elementos al centro del eje transversal; y línea de base para alinear elementos para que sus líneas de base estén alineadas. Estirar es el valor predeterminado.

  • Alinear contenido

Esta propiedad alinea las líneas de un contenedor flexible cuando hay espacio adicional en el eje transversal. Sus valores son: estirar para distribuir el espacio después de cada fila; inicio flexible para apilar elementos hacia el inicio cruzado; extremo flexible para apilar elementos hacia el extremo cruzado; centro para apilar elementos en el centro del eje transversal; espacio alrededor para distribuir equitativamente el espacio alrededor de los elementos flexibles. El valor predeterminado es estirar.

Propiedades de Flexbox: propiedades de elementos flexibles

Ahora que conoce las propiedades del contenedor Flexbox, veamos las propiedades del elemento:

  • Orden

Esta propiedad controla el orden de aparición de los elementos secundarios del contenedor flexible. Se ordenan dentro del contenedor flexible de forma predeterminada.

.flex-item (

orden: ;

)

Puede reordenar los elementos flexibles sin tener que reestructurar el código HTML. El valor por defecto es cero.

  • Alinearse

Esta propiedad permite que se anule la alineación predeterminada de un elemento flexible específico. Puede usar los valores de align-items para esta propiedad.

.flex-item (

autoalinear: auto | inicio flexible | extremo flexible | centro | línea de base | tramo;

)

El valor automático en align-self se calcula mediante el valor de los elementos de alineación en el elemento padre. Si el elemento no tiene padre, se usa el estiramiento en su lugar.

Ejemplos básicos

Eso es todo lo que necesita saber para usar el diseño de cuadrícula CSS Flexbox. Ahora es tiempo de practicar lo que aprendiste. Aquí hay algunos ejemplos que muestran cómo se combinan todas estas propiedades. Comencemos con algo absolutamente simple:

.parent (

pantalla: flex;

altura: 300 px;

)

.child (

ancho: 100px;

altura: 100 px;

margen: auto;

)

Este es un ejemplo de centrado perfecto. Los valores de altura y anchura se pueden cambiar como desee. La clave aquí es establecer el margen en 'automático' para que el contenedor flexible absorba automáticamente cualquier espacio adicional. ¡Suficientemente simple!

Ahora, pasemos a agregar algunas propiedades más: una lista con seis elementos de dimensiones fijas que pueden ser auto-dimensionables. Deben distribuirse uniformemente en el eje horizontal.

.flex-container (

pantalla: flex;

justify-content: espacio alrededor;

)

A continuación, intentemos centrar una navegación alineada a la derecha para pantallas de tamaño mediano, y hacerlo de una sola columna en dispositivos pequeños.

/* Grande */

.navigation (

pantalla: flex;

flujo flexible: ajuste de fila;

justify-content: flex-end;

)

/ * Pantallas medianas * /

@media all y (ancho máximo: 800px) (

.navigation (

justify-content: espacio alrededor;

)

)

/ * Pantallas pequeñas * /

@media all y (ancho máximo: 500 px) (

.navigation (

dirección flexible: columna;

)

)

¡Es hora de dar un paso más allá! Probemos un diseño móvil primero con tres columnas, con un pie de página y encabezado de ancho completo e independiente del orden de origen.

.wrapper (

pantalla: flex;

flujo flexible: ajuste de fila;

)

/ * Le decimos a todos los artículos que sean 100% de ancho * /

.header, .main, .nav, .aside, .footer (

flexión: 1 100%;

)

/ * Confiamos en el pedido de origen para el enfoque móvil primero * /

/ * Pantallas medianas * /

@media all y (min-width: 600px) (

.aside (flex: 1 auto; )

)

/ * Pantallas grandes * /

@media all y (min-width: 800px) (

.main (flex: 2 0px; )

.aside-1 (orden: 1; )

.main (orden: 2; )

.aside-2 (orden: 3; )

.footer (orden: 4; )

)

Conclusión

Estos son solo algunos ejemplos básicos. Puede jugar mucho más con los diseños de cuadrícula CSS Flexbox, y son absolutamente invaluables si desea crear una página web receptiva.

Artículos recomendados

Así que aquí hay algunos artículos que ayudarán a obtener más detalles sobre las propiedades de flexbox, el código de flexbox y también sobre la cuadrícula de css flexbox, así que simplemente vaya al enlace que se proporciona a continuación.

  1. HTML vs XML - Diferencias principales
  2. CSS3 vs CSS - ¿Cómo son diferentes? (Infografía)
  3. HTML vs CSS Diferencias principales
  4. HTML5 vs Flash

Categoría:

Herramientas de desarrollo web