0

FLEXBOX
Propiedades de flexbox
 FLEXBOX

Flexbox, o el apartado de diseo flexibles, es un nuevo modo de diseo en

CSS3 diseada para el tendido de aplicaciones complejas y pginas web.

En CSS 2.1, se definieron cuatro modos de diseo que determinan el tamao y la

posicin de las cajas sobre la base de sus relaciones con sus hermanos y cajas
antepasado: el diseo de bloque diseado para la colocacin de documentos, y que
establece elementos de una pgina verticalmente; el diseo en lnea diseada para
la colocacin de texto horizontalmente dentro de contenedores a nivel de bloque; la
disposicin de la tabla diseada para el tendido de datos bidimensionales en un
formato tabular; y la disposicin de posicionado diseado para un posicionamiento
muy explcita sin mucha consideracin por otros elementos del documento.

Flexbox es similar al diseo de bloque, excepto que carece de muchas de las

propiedades que se pueden utilizar en un diseo de bloque, tales como flotadores y
columnas. Pero de nuevo, tiene ms flexibilidad para distribuir el espacio y la
alineacin de contenido de manera que las aplicaciones web y pginas web
complejas a menudo necesitan. Se resuelve muchos otros problemas de diseo que
hemos estado luchando en contra y tratando de resolver desde hace mucho tiempo
como el centrado vertical, por ejemplo, entre muchos otros.

Flexbox le permite para disear elementos en un contenedor, organizar y (re) ordena

ellos, alinearlas y distribuir el espacio entre (y / o alrededor de) ellos,
independientemente de su tamao. Se le permite hacer literalmente flexibles-
artculos dentro de un contenedor puede ser estirado y encogido para acomodar el
espacio disponible, y puede ser dimensionado en forma proporcional entre s, y
cualquier espacio disponible entre o alrededor de ellos se puede distribuir entre ellos
sobre la base de una proporcin que se llega a especificar.

Usando Flexbox, tambin se puede poner elementos en el interior de un contenedor

en cualquier direccin: horizontal o vertical, llamado las direcciones de flexin; no
est limitado a una sola direccin que en otros modos de diseo. Esto permite la
creacin de diseos ms adaptables y sensibles que se adaptan a los cambios de
diseo en diferentes tamaos de pantalla y orientaciones.
Por ltimo, pero no menos importante, se puede cambiar el orden visual de los
elementos dentro del contenedor sin afectar su orden real en el marcado. Esto
significa que usted puede cambiar el orden en que ciertos elementos aparecen en
la pgina, mientras que preserva su orden en el marcado. Esto es til para cuando
se desea poner de relieve ciertos elementos, como un post del blog destacadas,
incluso si esos artculos no vienen por primera vez en el marcado.
Resumen de las propiedades FlexBox
 1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
7. order
8. align-self
9. flex-grow
10. flex-shrink
11. flex-basis
12. flex

Creando un diseo flexible: La flexin de contenedores y Artculos

El primer paso para comenzar a usar Flexbox es crear un contenedor de flexin.
Hijos de un contenedor de flexin son llamados los elementos de flexin, y se
disponen en el interior del recipiente a flex con las propiedades FlexBox. Algunas de
las propiedades FlexBox aplican al recipiente, otros se aplican a los elementos de
flexin.
Un contenedor de flexin se crea mediante el establecimiento de la displaypropiedad
de un elemento a cualquiera flexo inline-flex.

.flex-contenedor {
display : flexin ;
}

/*o*/

.flex-contenedor {
display : inline-flex ;
}

display: flexcrea un contenedor de flexin a nivel de bloque; display: inline-flexcrea

un contenedor de flexin a nivel de lnea. El recipiente flex se convierte en un
contexto flex por sus descendientes directos.

Hijos de un contenedor de flexin, los elementos de flexin, se establecen utilizando

el diseo Flexbox. Cualquier elemento fuera de un contenedor de flexin no se ve
afectada por el trazado Flexbox definido en l, y ser mostrado como lo hara
normalmente en la pgina.
Conceptos y Terminologa

Antes de ir a travs de las propiedades FlexBox que controlan y adaptar el diseo

Flexbox, hay dos conceptos y trminos que usted debe familiarizarse con la primera:
ejes de flexin y lneas de flexin.

Los ejes de flexin

A diferencia de bloque y el diseo en lnea, cuyo diseo se basa en bloque y de flujo
en lnea direcciones, el diseo de la flexin se basa en las direcciones de flexin.
El concepto de direcciones de flexin se basa en el concepto de ejes que determinan
las direcciones a lo largo de las que se establecen los elementos de flexin. La
ilustracin siguiente muestra los ejes definidos en un contenedor de flexin:

En funcin de los valores de las propiedades Flexbox, elementos flexibles quedan

dispuestas dentro de un contenedor de la flexin ya sea siguiendo el eje principal o
el eje transversal.

El eje principal de un recipiente flex es el eje principal a lo largo de los

elementos de flexin se establecen. Se extiende en la dimensin principal.
Los elementos flexibles se colocan dentro del contenedor a partir de la
principal de arranque lado y yendo hacia el cierre del principal lado.
Anchura o la altura de un punto de flexin, lo que sea en la dimensin
principal, es el tema del tamao principal. De vacaciones superficie principal
 del elemento de flexin es o bien el width o height la propiedad, lo que sea
en la dimensin principal.
El eje perpendicular al eje principal se llama el eje transversal. Se extiende
en la dimensin transversal.
La anchura o la altura de un elemento de flexin, lo que sea en la dimensin
transversal, es el elemento de la cruz del tamao. La propiedad de tamao
transversal es aquel de width o height que se encuentra en la dimensin
transversal.
Lneas de flexin (ver siguiente seccin) estn llenos de artculos y se
colocan en el recipiente a partir de la cruz de arranque lateral del recipiente
de la flexin y yendo hacia el fin de cruz lateral.

Es necesario que se familiarice con estos conceptos antes de empezar a utilizar el

diseo Flexbox. Todo en el diseo Flexbox es relativa a estos dos ejes.

Lneas de Flex
Artculos de flexin en un contenedor de flexin estn dispuestos y alineados dentro
de las lneas de flexin, una lnea hipottica utilizada para la agrupacin y la
alineacin de los elementos flexibles dentro de su contenedor. Lneas Flex siguen el
eje principal. Un contenedor de flexin puede ser o bien una sola lnea o varias
lneas, dependiendo de la flex-wrap propiedad:

Una sola lnea de contenedores flexin expone todos sus hijos en una sola
lnea, incluso si eso hara que su contenido se desborden.

Una de varias lneas de contenedores flexin rompe sus elementos flexibles

a travs de mltiples lneas, similar a cmo el texto se divide en una nueva
lnea cuando se hace demasiado grande para caber en la lnea existente.
Cuando se crean lneas adicionales, que se apilan en el recipiente de la
flexin a lo largo del eje transversal de acuerdo con la flex-wrap propiedad.
Cada lnea contiene al menos un elemento de la flexin, a menos que el
propio recipiente flex est completamente vaco.

Modos de escritura
La ilustracin anterior supone que el modo de escritura es un modo de izquierda a
derecha (LTR). La lnea de la flexin sigue la direccin del texto que, en un modo de
izquierda a derecha, es de izquierda a derecha y de arriba abajo.

Sin embargo, si cambia la direccin del texto usando la propiedad direction, la

direccin de la lnea de la flexin tambin cambiar, cambiando la direccin de los
elementos flexibles se disponen a lo largo.
Adems, si cambia el modo de escritura (ver writing-mode), las direcciones tanto del
eje principal y el eje transversal tambin cambiarn. Por ejemplo, en una disposicin
del idioma japons, el eje principal es vertical y el eje transversal es horizontal. Vea
la flex-flow seccin de la propiedad para un ejemplo.

Para obtener ms informacin acerca de los posibles modos de escritura y

direcciones, consulte la Escritura Mdulo Modos de CSS y la direction entrada de la
propiedad.

Propiedades: Propiedades FlexBox Flex contenedores

1. La propiedad flex-direction

flex-direccin : row | row-reverse | column | column-reverse

La flex-direction propiedad especfica el nmero de elementos de la flexin se coloca
en el recipiente de la flexin, fijando la direccin del eje principal del recipiente
flexible. Esto determina la direccin en la que los elementos de flexin se establecen
en. La direccin de los ejes se ve afectada por el modo de escritura y la
direccionalidad del texto (seguir leyendo).
Los posibles valores tienen los siguientes significados:

Este es el valor inicial. Eje principal del

recipiente flex tiene la misma orientacin que
el modo de escritura actual. El principal de
arranque est a la izquierda en un lenguaje de
row izquierda a derecha, y el principal de fin est a
la derecha. En un idioma de derecha a
izquierda, el principal de arranque est a la
derecha y la principal de fin est a la izquierda.

Lo mismo que row, salvo que cambien las

direcciones principales de inicio y del fin
row-reverse principal. El Eje principal del contenedor Flex
tiene la orientacin opuesta como el modo de
escritura actual.

Eje principal del recipiente flex se gira de

manera que el principal de arranque es en la
parte superior y de la principal-final es en la
column parte inferior. Bsicamente, los elementos de
flex se colocan verticalmente de arriba a abajo
en un lenguaje horizontal. Si el idioma es
vertical, entonces el column valor ser
horizontal con respecto a la lengua.

Lo mismo que column, salvo que se

intercambian direcciones principal de inicio y
column-reverse de fin principal.
 2. La propiedad flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse

La propiedad flex-wrap controla el contenedor flex si es de una sola lnea o varias

lneas, y la direccin del eje transversal, que determina la direccin de las nuevas
lneas se apilan en:

Los posibles valores tienen los siguientes significados:

 Este es el valor inicial. El recipiente flex es de
una sola lnea, y todos los artculos estn
distribuidas en esa lnea, incluso si esto
nowrap significa que podran desbordar el recipiente.
La direccin de la lnea de flexin depende de
la direccionalidad del texto (vase flex-
direction ms arriba).

Los elementos flexibles se salten sobre las

lneas de flexin adicionales si no hay
suficiente espacio para ellos en la primera
lnea de la flexin. Lneas de flexin
wrap adicionales se aaden en la direccin del eje
transversal, que se ve afectada por la
direccionalidad del texto (vase flex-direction
ms arriba).

Lo mismo que wrap, salvo que cambien las

direcciones transversal de inicio y de fin de
wrap-reverse cruz. Esto significa que las lneas de flexin
adicionales se aaden en la direccin opuesta
del eje transversal.

3. La propiedad flex-flow

flex-flow: < flex-direction > < flex-wrap >

La propiedad flex-flow es una forma rpida para establecer las propiedad flex-
direction y flex-wrap, que en conjunto definen los ejes principales y transversales
del contenedor flex.

El valor inicial de la propiedad flex-flow es la concatenacin de los valores iniciales

de las propiedades flex-direction y flex-wrap:

flex-flow : row nowrap;

flex-flow: < flex-direction > < flex-wrap >

Tenga en cuenta que las flex-flow direcciones estn escribiendo el modo sensible.
En japons vertical, por ejemplo, un recipiente flex fila establece su contenido de
arriba a abajo, como se ve en este ejemplo:

Imagen que muestra la diferencia en las direcciones de disposicin entre una lengua horizontal
(Ingls) y un lenguaje vertical (japons).

4. la propiedad justify-content

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

La propiedad justify-content se alinea elementos de flexin a lo largo del eje principal
de la lnea actual del envase flexible. Esto se hace despus de las longitudes
flexibles y cualquier margen de automviles se han resuelto. Normalmente se ayuda
a distribuir el espacio extra de sobra libre cuando o bien todos los elementos de
flexin en una lnea son inflexibles, o son flexibles, pero han alcanzado su tamao
mximo. Tambin ejerce un cierto control sobre la alineacin de los artculos cuando
se desborda la lnea.
Los posibles valores tienen los siguientes significados:

flex-inicio
Este es el valor inicial. Artculos Flex se embalan hacia el inicio de la lnea.
flex-end
Flex artculos son embalados hacia el final de la lnea.

centrar
artculos Flex estn embalados hacia el centro de la lnea, con la misma cantidad de
espacio vaco entre el borde principal de inicio de la lnea y el primer punto de la
lnea y entre el borde de extremo principal de la lnea y el ltimo elemento en la lnea
de . (Si el espacio libre de sobra es negativa, los elementos flexibles se desbordar
por igual en ambas direcciones).

espacio entre
Flex artculos se distribuyen de manera uniforme en la lnea. Si el espacio libre de
sobra es negativo o no hay ms que un solo elemento de la flexin en la lnea, este
valor es idntico al flex-start. De lo contrario, el primer elemento de la flexin en la
lnea se coloca en el borde principal de inicio de la lnea, el ltimo elemento de la
flexin en la lnea est en el borde de extremo principal de la lnea, y los elementos
de flexin restantes en la lnea se distribuyen de manera que la separacin entre dos
elementos adyacentes es el mismo.

espacio-en torno a
Flex artculos se distribuyen de manera uniforme en la lnea, con espacios de tamao
medio en cada extremo. Si el espacio libre de sobra es negativo o no hay ms que
un solo elemento de la flexin en la lnea, este valor es idntico al center. De lo
contrario, los elementos de flexin en la lnea se distribuyen de tal manera que la
separacin entre dos elementos de flexin adyacentes en la lnea es el mismo, y la
separacin entre los primeros / ltimos elementos de flexin y los bordes de
contenedor flex es la mitad del tamao de la separacin entre artculos flex.
La siguiente demostracin muestra el resultado de la aplicacin de los diferentes
justify-contentvalores a un recipiente flexible. Otras propiedades FlexBox se
establecen en sus valores por defecto.