Clase 5: Diseñador WEB

Flexbox

¿Que es Flexbox?

Block
Inline
Table
Positioned

¿Que se puede hacer con Flexbox?

Distribuir los elementos.
Reordenar la aparición de los elementos.
Ajustar dinámicamente las dimensiones de los elementos para evitar desbordamientos.
Redefinir el sentido del flujo de los elementos.
Alinear los elementos respecto al padre o respecto a sus hermanos.

Conceptos básicos de Flexbox

Propiedades para aplicar en el contenedor

					
div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex; 
    flex-direction: row-reverse;
}

Link

					
div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse; 
}

Link

					
div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;   
    flex-wrap: wrap;
}

Link

					
div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
    display: flex;
    flex-flow: row-reverse wrap;
}

Link

					
div {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

Link

					
div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

Link

					
div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

Link

Propiedades a aplicar en los items

					
/* Safari 6.1+ */
div:nth-of-type(1) {-webkit-flex-grow: 1;}
div:nth-of-type(2) {-webkit-flex-grow: 3;}
div:nth-of-type(3) {-webkit-flex-grow: 1;}

/* Standard syntax */
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

Link

					
/* Safari 6.1+ */
div:nth-of-type(2) {
    -webkit-flex-shrink: 3; 
} 

/* Standard syntax */
div:nth-of-type(2) {
    flex-shrink: 3;
}

Link

					
div:nth-of-type(2) {
    -webkit-flex-basis: 80px; /* Safari 6.1+ */
    flex-basis: 80px;
}

Link

					
#myBlueDiv {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}

Link