ÚLTIMAS NOTICIAS

Nuestros pensamientos sobre diseño y desarrollo de software

Una guía completa de Flexbox en 20 minutos

El CSS3 Flexible Box, o flexbox , es un modo de disposición que proporciona la disposición de elementos en una página de tal forma que los elementos se comportan de manera predecible cuando el diseño de página debe acomodar diferentes tamaños de pantalla y diferentes dispositivos de visualización.

Fuente:www.css-tricks.com

Fondo

El módulo de Flexbox Layout (Flexible Box) (actualmente un borrador de trabajo de la última llamada del W3C) tiene como objetivo proporcionar una forma más eficiente de distribuir el espacio entre los elementos de un contenedor, incluso cuando su tamaño es desconocido y / o dinámico la palabra «flex»). La idea principal detrás del diseño de flex es dar al contenedor la capacidad de alterar el ancho / altura (y orden) de sus artículos para llenar mejor el espacio disponible (sobre todo para acomodar a todo tipo de dispositivos de visualización y tamaños de pantalla). Un contenedor flexible expande los elementos para llenar el espacio libre disponible o los encoge para evitar el desbordamiento. Más importante aún, el diseño de la caja flexible es orientado a la agnóstico en oposición a los diseños regulares (bloque que es vertical y en línea que se basa horizontalmente). Mientras que los que trabajan bien para las páginas, carecen de flexibilidad (sin retruécano) para apoyar las aplicaciones grandes o complejas (especialmente cuando se trata de cambio de orientación, el cambio de tamaño, el estiramiento, encogimiento, etc). Nota: el diseño de Flexbox es el más apropiado para los componentes de una aplicación y para los diseños de pequeña escala, mientras que el diseño de Grid está diseñado para diseños de escala mayor.

Conceptos básicos & Terminología

Propiedades para el sistema principal
(contenedor flexible)

#monitor

Esto define un contenedor flexible; inline o block dependiendo del valor dado. Permite un contexto flexible para todos sus hijos directos.

.container {
  monitor: flex; /* or inline-flex */
}

Tenga en cuenta que las columnas CSS no tienen ningún efecto en un contenedor flexible.

#flex-direction


Esto establece el eje principal, definiendo así los elementos flexibles de dirección que se colocan en el contenedor flexible. Flexbox es (aparte de la envoltura opcional) un concepto de disposición de una sola dirección. Piense en los elementos de flexión, ya sea en filas horizontales o columnas verticales.

.container {
  flex-direction: fila | fila inversa | columna | columna inversa;
}
  • row (predeterminado): de izquierda a derecha en ltr ; de derecha a izquierda en rtl
  • row-reverse : de derecha a izquierda en ltr ; de izquierda a derecha en rtl
  • column : igual que row , pero de arriba hacia abajo
  • column-reverse : igual que row-reverse , pero de abajo arriba

#flex-wrap

De forma predeterminada, los elementos flexibles intentarán encajar en una sola línea. Puede cambiarlo y permitir que los elementos se envuelvan según sea necesario con esta propiedad.

.container{
  envoltura flexible:nowrap | envoltura | envolver inverso;
}
  • ahora en(predeterminado): todos los elementos flexibles estarán en una línea
  • wrap : los elementos flex se encapsularán en varias líneas, de arriba hacia abajo.
  • wrap-reverse : los elementos flex se encapsularán en múltiples líneas desde abajo hasta arriba.

There are some visual demos of flex-wrap here.

#flex-flow (Se aplica a: elemento de contenedor flexible padre)

Esta es una abreviatura flex-direction y flex-wrap propiedades, que en conjunto definen los ejes principal y transversal del contenedor flex. El valor predeterminado es row nowrap .

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

#justificar el contenido


Esto define la alineación a lo largo del eje principal. Ayuda a distribuir el espacio libre adicional sobrante cuando cualquiera de los elementos flexibles de una línea son inflexibles, o son flexibles pero han alcanzado su tamaño máximo. También ejerce cierto control sobre la alineación de elementos cuando rebosan la línea.

.container {
  justificar el contenido: flex-start | flex-end | centro | espacio entre | espacio alrededor;
}
  • flex-start (predeterminado): los elementos se empaquetan hacia la línea de inicio
  • flex-end : los elementos se empaquetan hacia la línea final
  • center : los elementos están centrados a lo largo de la línea
  • space-between : los elementos están distribuidos uniformemente en la línea; primer elemento está en la línea de inicio, último elemento en la línea de fondo
  • space-around : los elementos se distribuyen uniformemente en la línea con el mismo espacio alrededor de ellos. Tenga en cuenta que visualmente los espacios no son iguales, ya que todos los elementos tienen el mismo espacio en ambos lados. El primer elemento tendrá una unidad de espacio contra el borde del contenedor, pero dos unidades de espacio entre el elemento siguiente porque ese elemento siguiente tiene su propio espaciado que se aplica.

#align-items


Esto define el comportamiento predeterminado de cómo los elementos flexibles se distribuyen a lo largo del eje transversal en la línea actual. Piense en ello como la versión justify-content para el eje transversal (perpendicular al eje principal).

.container {
  alinear elementos: flex-start | flex-end | centro | línea de base | tramo;
}
  • flex-start : el borde de margen de inicio cruzado de los elementos se coloca en la línea de inicio cruzado
  • flex-end : el borde de borde cruzado de los elementos se coloca en la línea de final de línea
  • center : los elementos están centrados en el eje transversal
  • baseline : los elementos se alinean de forma que sus líneas de base se alineen
  • stretch (predeterminado): estira para llenar el contenedor (sigue respetando min-width / max-width)

#alinear el contenido


Esto alinea las líneas de un contenedor flexible cuando hay espacio extra en el eje transversal, similar a cómo justifica-contenido alinea elementos individuales dentro del eje principal.

Nota: esta propiedad no tiene efecto cuando sólo hay una línea de elementos flexibles.

.container {
 alinear el contenido  :  flex-start | flex-end | centro | espacio entre | espacio-alrededor | estirar ; 
}
  • flex-start : líneas empacadas al inicio del contenedor
  • flex-end : líneas empacadas al final del contenedor
  • center : líneas empacadas en el centro del contenedor
  • espacio-entre : líneas uniformemente distribuidas; la primera línea está al principio del contenedor mientras que la última está al final
  • space-around : líneas uniformemente distribuidas con igual espacio alrededor de cada línea
  • stretch (predeterminado): las líneas se extienden para ocupar el espacio restante

Propiedades para los niños
(elementos flexibles)

#order


De forma predeterminada, los elementos flexibles se distribuyen en el orden de origen. Sin embargo, la propiedad order controla el orden en el que aparecen en el contenedor flex.

.item {
  order: <integer>;
}

#flex-grow


Esto define la capacidad de un elemento flex para crecer si es necesario. Acepta un valor sin unidad que sirve como proporción. Determina la cantidad de espacio disponible dentro del contenedor de flexión que debe ocupar el artículo.

Si todos los elementos tienen flex-grow establecido en 1, el espacio restante en el contenedor se distribuirá por igual a todos los niños. Si uno de los niños tiene un valor de 2, el espacio restante ocuparía el doble de espacio que los demás (o intentará, al menos).

.item {
  flex-grow: <number>; /* default 0 */
}

Los números negativos no son válidos.

#flex-shrink

Esto define la capacidad de un artículo flexible de reducirse si es necesario.

.item {
  flex-shrink: <number>; /* default 1 */
}

Los números negativos no son válidos.

#base flexible

Esto define el tamaño predeterminado de un elemento antes de distribuir el espacio restante. Puede ser una longitud (por ejemplo, 20%, 5rem, etc.) o una palabra clave. La palabra clave auto significa «mirar mi propiedad width o height» (que fue temporalmente hecha por la palabra clave main-size ). La palabra clave content significa que «el tamaño se basa en el contenido del elemento» – esta palabra clave no está bien soportada, por lo que es difícil probar y más difícil saber lo que sus hermanos max-content < , min-content y fit-content .

.item {
  flex-basis: <length> | auto; /* default auto */
}

Si se establece en 0 , el espacio adicional alrededor del contenido no se tiene en cuenta. Si se establece en auto , el espacio extra se distribuye en función de su flex -grow . Ver este gráfico.

#flex

Esta es la abreviatura de flex-grow, flex-shrink y flex-basis combinados. El segundo y tercer parámetros ( flex-shrink y flex-basis ) son opcionales. El valor predeterminado es 0 1 auto .

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Se recomienda utilizar esta propiedad abreviada en lugar de establecer las propiedades individuales. La mano corta establece los otros valores de forma inteligente.

#align-self


Esto permite que la alineación predeterminada (o la especificada por align-items ) sea reemplazada para elementos flex individuales.

Consulte la explicación align-items para comprender los valores disponibles.

.item {
  align-self: auto | flex-start | flex-end | centro | línea de base | tramo;
}

Tenga en cuenta que float , clear y vertical-align no tienen ningún efecto en un elemento flex.

Estamos aquí y feliz de ayudar!

Email

Nos pondremos en contacto con usted lo antes posible.

ENVIAR CORREO ELECTRÓNICO

Chat en vivo

Hable en línea con nuestro apoyo al cliente impresionante.

CHATEA AHORA

Llamada

De lunes a viernes de 8am a 8pm IST.

+91 9555960648

Videos de soporte

Vea nuestro video en línea y comience rápidamente.

VER AHORA

¿Tengo una pregunta? Nuestro equipo está aquí para ayudar