Taller Flexbox - CSS3

La tecnología FLEXBOX añade un nuevo modelo de caja flexible en CSS3 que viene a evitarnos muchos quebraderos de cabeza en la disposición de los elementos y de estructuras complejas sin necesidad de usar FLOATS, POSITION, BLOCK, INLINE etc.

FLEXBOX nos permite controlar los elementos tanto en el eje horizontal como en el vertical,ordenarlos sin necesidad de modificar el HTML y crear intrínsecamente estructuras multidispositivo.

PROPIEDADES:

Contenedor padre

Elementos hijos

Display: flex

See the Pen NNLrJP by Pixeltomas (@Pixeltomas) on CodePen.


Flex-direction: row | row-reverse | column | column-reverse

See the Pen jqvGgd by Pixeltomas (@Pixeltomas) on CodePen.


Flex-wrap: nowrap | wrap | wrap-reverse;

See the Pen grdXOe by Pixeltomas (@Pixeltomas) on CodePen.


Flex-flow: <'flex-direction'> || <'flex-wrap'>;

See the Pen ONoOyw by Pixeltomas (@Pixeltomas) on CodePen.


Justify-content: flex-start | flex-end | center | space-between | space-around;

See the Pen jqvaVj by Pixeltomas (@Pixeltomas) on CodePen.


Align-items: flex-start | flex-end | center | baseline | stretch; /* default stretch */

See the Pen NNLwXV by Pixeltomas (@Pixeltomas) on CodePen.


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

See the Pen NNLwXV by Pixeltomas (@Pixeltomas) on CodePen.


order: <'integer'>;

See the Pen eZLyNR by Pixeltomas (@Pixeltomas) on CodePen.


flex-grow: <'number'>; /* default 0 */

See the Pen aNaEpG by Pixeltomas (@Pixeltomas) on CodePen.


flex-shrink: <'number'>; /* default 1 */

See the Pen mPGpvJ by Pixeltomas (@Pixeltomas) on CodePen.


flex-basis: <'length'> | auto; /* default auto */

See the Pen JXaMQV by Pixeltomas (@Pixeltomas) on CodePen.


flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

See the Pen XdPGMX by Pixeltomas (@Pixeltomas) on CodePen.


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

See the Pen dMqrgd by Pixeltomas (@Pixeltomas) on CodePen.




Realizar el siguiente juego:

Flexbox game