Caja flexible CSS3

Caja flexible CSS3 es un nuevo modo de diseño.

El propósito de introducir el modelo de diseño de bolsa flexible es proporcionar una manera más eficiente de organizar un recipiente sub-elementos, alineación y distribución del espacio en blanco.

Soporte para el navegador

Las cifras de la tabla representan el primer navegador compatible con el número de versión de propiedad.

Inmediatamente después del navegador el número -webkit- o prefijo -moz- especificado.

Contenido de la caja flexible CSS3

Caja flexible hecho de un contenedor elástico (contenedor Flex) y los sub-elementos elásticos (partida) Componentes de Flex.

contenedor elástico estableciendo la propiedad de presentación es la flexión o en línea-flex se define como el contenedor elástico.

El recipiente elástico contiene uno o más resistentes sub-elementos.

Nota: el recipiente exterior elástico y el elemento elástico es un niño de la prestación normal. Caja flexible sólo define lo resistente que los elementos secundarios dentro del diseño del recipiente elástico.

sub-elemento flexible está por lo general aparece en el cuadro de la línea elástica. De forma predeterminada, cada contenedor es sólo una línea.

A continuación se muestra el elemento elástico elementos secundarios se muestran en una sola línea, de izquierda a derecha:

Por supuesto, podemos modificar la disposición.

Si nos fijamos el direction de propiedad de rtl (de derecha a izquierda), la disposición de los sub-elementos elásticos va a cambiar, diseños de página cambio también siguieron:

flex-dirección

flex-direction orden especifica el sub-elemento elástico en el contenedor principal.

gramática

flex-direction: row | row-reverse | column | column-reverse

flex-direction valores son:

• fila: lateralmente de izquierda a derecha (izquierda), la disposición predeterminada.
• fila-inverso: revés alineados lateralmente (justificado a la derecha, hacia adelante desde la última fila, el último en la parte superior.
• columna: disposición vertical.
• columna inversa: revertir disposición vertical, desde la fila de atrás adelante, y finalmente una fila en la parte superior.

El siguiente ejemplo ilustra la row-reverse uso:

El siguiente ejemplo ilustra la column utilizada:

Los siguientes ejemplos demuestran la column-reverse uso:

atributo justificar contenido

alineación contenido (justificar-contenido) sobre las propiedades elásticas del contenedor de la aplicación, los elementos elásticos de contenedores elásticos alineado a lo largo del eje principal (eje principal).

sintaxis justificar-contenido es el siguiente:

justify-content: flex-start | flex-end | center | space-between | space-around

Cada análisis de valor:

• flex-inicio:
  

  proyecto flexible para la primera línea junto al relleno. Este es el valor predeterminado. El primer principal de inicio de los bordes exteriores del elemento elástico se coloca en los bordes principales de inicio de la línea, y el rubor posterior a su vez coloca un término elástico.

• flex-end:
  

  proyecto flexible al final de la línea al lado del relleno. Los primeros elementos de gama principal de fuera de los hilos elásticos se colocan en los bordes de fin principal de la línea, y el rubor posterior a su vez colocan un término elástico.

• centro:
  

  proyecto flexible centrado junto a llenar. (Si el espacio libre que queda es negativo, el proyecto también se desborde elasticidad en ambas direcciones).

• espacio entre:
  

  proyecto flexible distribuye uniformemente en la fila. Si el espacio es negativo o solamente un término elástico, el valor equivalente a la flexión de arranque. De lo contrario, la principal-comenzar desde los bordes exteriores de la primera fila y una alineación elemento elástico, mientras que la línea de extremo principal y el margen lateral último término una alineación elástica y distribución de los productos que queden en la línea elástica, adyacente igualmente espaciados artículos.

• espacio en torno a:
  

  proyecto Flexible distribuye de manera uniforme en la línea, a ambos lados de la mitad izquierda del espacio. Si el espacio es negativo o solamente un término elástico, el valor es equivalente a la central. De lo contrario, la elasticidad del proyecto a lo largo de la línea de distribución e igualmente espaciados entre sí (por ejemplo, es 20 píxeles), mientras que deja la mitad del intervalo (1/2 * 20 píxeles = 10px) entre la cabeza y la cola en ambos lados y recipiente elástico.

Representaciones muestran:

El siguiente ejemplo demuestra la flex-end uso:

El siguiente ejemplo demuestra el center su uso 's:

Los siguientes ejemplos demuestran el space-between el uso de:

Los siguientes ejemplos demuestran el space-around usar:

ALIGN-artículos de propiedad

align-items fijados o recuperar el elemento elástico en el lado del eje de la caja (eje vertical) dirección de alineación.

gramática

align-items: flex-start | flex-end | center | baseline | stretch

Cada análisis de valor:

• flex-inicio: el lado límite de la elemento de caja eje elástico (eje vertical) frente a la posición inicial del eje de la parte en vivo de la frontera línea de salida.
• flex-end: límite elástico lado del eje de elemento de caja (eje vertical) frente a la posición de partida para vivir extremo del eje de la línea de frontera.
• centro: el cuadro de elemento elástico colocado en el centro del eje del lado de línea (eje vertical) en. (Si el tamaño es más pequeño que el tamaño de la línea elástica del elemento de caja, es de la misma longitud en ambas direcciones de desbordamiento).
• línea de base: elementos de caja como eje interior elástica y línea de ejes lado es lo mismo, el valor de equivalente 'flex-start'. En otros casos, el valor estará involucrado en alineación de línea base.
• estirar: Si el tamaño del atributo cuadro margen especifica el tamaño del lado del eje es 'auto', su valor será cercano a los elementos de línea como el tamaño, pero seguirá la propiedad 'min / max-anchura / altura' restricciones.

El siguiente ejemplo demuestra stretch(默认值) el uso de:

El siguiente ejemplo demuestra la flex-start uso:

El siguiente ejemplo demuestra la flex-end uso:

El siguiente ejemplo demuestra el center su uso 's:

El siguiente ejemplo demuestra la baseline de uso:

propiedad flex-wrap

atributoflex-wrap se utiliza para especificar un modo de elemento de envoltura elástica caja hija.

gramática

flex-flow:  || 

Cada análisis de valor:

• nowrap - De manera predeterminada, el contenedor elástico como una sola línea.En este caso infantil elástico puede desbordar recipiente.
• envuelva - contenedores elástica varias líneas.parte de rebosamiento del niño resiliente se coloca en este caso a una nueva línea, salto de línea interna ocurrirá subclave
• wrap-invertir - Inversión del orden de envoltura.

El siguiente ejemplo demuestra el nowrap uso:

El siguiente ejemplo demuestra la wrap de uso:

El siguiente ejemplo demuestra la wrap-reverse uso:

atributo ALIGN-contenido

align-content atributo se utiliza para modificar el flex-wrap comportamiento atributo. Similar align-items , pero no está ajustado el alineamiento de los sub-elementos elásticos, pero definen la alineación de cada fila.

gramática

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Cada análisis de valor:

• stretch - por defecto. Cada línea se extenderá a ocupar el espacio restante.
• flex-start - filas de cajas apiladas a la posición inicial del contenedor elástico.
• flex-end - filas de cajas apiladas a la posición final del contenedor elástico.
• center - filas de cajas apiladas a la posición central del recipiente elástico.
• space-between - cada fila del envase bolsa flexible uniformemente distribuida.
• space-around - cada línea en el contenedor bolsa flexible distribuye por igual entre los dos extremos de retener la mitad de los sub-elementos y sub-elementos separadores tamaño.

El siguiente ejemplo demuestra el center su uso 's:

atributos sub-elemento flexible

secuencia

gramática

order: 

Cada análisis de valor:

• <Integer>: un valor entero utilizado para definir el orden en el que el pequeño valor de la superficie superior. Puede ser negativo.

order para establecer las propiedades dentro de las propiedades elásticas de los elementos elásticos contenedor secundario:

alinear

Ajustes "margen" es el valor "auto", obtener automáticamente el contenedor elástico en el espacio restante. Así ajustar el margen vertical de "auto", que permite a los sub-elementos elásticos están completamente enfocados en la dirección de dos ejes del contenedor elástico.

Los siguientes ejemplos están en el primer elemento de sub-elástico fijado margin-right: auto; . El espacio restante se colocará en los elementos adecuados:

centro perfecto

Los siguientes ejemplos serán la solución perfecta a los problemas que suelen encontrar centro.

caja elástica, centro se convierte en muy simple, sólo quieren establecer el margin: auto; puede hacer que los sub-elementos elásticos en la dirección axial en dos perfectamente centrada:

alinear-auto

align-self atributo se utiliza para establecer la dirección de la alineación del elemento elástico en sí en el lado del eje (eje vertical).

gramática

align-self: auto | flex-start | flex-end | center | baseline | stretch

Cada análisis de valor:

• Auto: Si el valor 'auto' 'align-yo ", el valor calculado de elemento padre del elemento de valor"-items align', si no tiene padre, el valor calculado de la 'estiramiento'.
• flex-inicio: el lado límite de la elemento de caja eje elástico (eje vertical) frente a la posición inicial del eje de la parte en vivo de la frontera línea de salida.
• flex-end: límite elástico lado del eje de elemento de caja (eje vertical) frente a la posición de partida para vivir extremo del eje de la línea de frontera.
• centro: el cuadro de elemento elástico colocado en el centro del eje del lado de línea (eje vertical) en. (Si el tamaño es más pequeño que el tamaño de la línea elástica del elemento de caja, es de la misma longitud en ambas direcciones de desbordamiento).
• línea de base: elementos de caja como eje interior elástica y línea de ejes lado es lo mismo, el valor de equivalente 'flex-start'. En otros casos, el valor estará involucrado en alineación de línea base.
• estirar: Si el tamaño del atributo cuadro margen especifica el tamaño del lado del eje es 'auto', su valor será cercano a los elementos de línea como el tamaño, pero seguirá la propiedad 'min / max-anchura / altura' restricciones.

El siguiente ejemplo demuestra los sub-elementos elásticos se alinean-auto efecto de la aplicación de los diferentes valores:

flexible

flex atributo se utiliza para especificar cómo asignar espacio para los sub-elementos elásticos.

gramática

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Cada análisis de valor:

• Ninguno: la palabra clave no es calcular: 0 0 auto
• [Flex-crecer]: definición de la relación de expansión cuadro elemento elástico.
• [Flex-encogimiento]: definición de la relación de contracción cuadro elemento elástico.
• [Flex-base]: El valor de referencia predeterminado define el elemento elástico de la caja.

En el siguiente ejemplo, un primer elemento de sub-elástico ocupa 2/4 del espacio, los otros dos cada cuarto espacio:

más ejemplos

Crear una página de respuesta utilizando una caja elástica

CSS3 Propiedades de cuadro flexibles

La siguiente tabla muestra utilizan comúnmente a la caja en las propiedades elásticas: