Guía rápida de Flexbox

Flexbox es un sistema de elementos flexibles los cuales se adaptan y colocan automáticamente haciendo más fácil personalizar diseños responsivos. Está pensando para diseños en una sola dirección, ya sea filas y columnas. En Flexbox tenemos los “flex containers”, que es el elemento que contiene los elementos flexibles y los “flex items” que son los elementos dentro del “flex container”.

Estructura básica para utilizar Flexbox

 <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

*{
    box-sizing: border-box;
}

.flex-container{
    display: flex;
}

Atributos para indicar si utilizamos renglones o columnas

flex-direction: column;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column-reverse;

Permitir cambio de linea o no

flex-wrap: wrap;
flex-wrap: nowrap;

Centrar objetos de manera horizontal

.flex-container{
    display: flex;
    justify-content: center;
}

Alinear objetos a la izquierda

.flex-container{
    display: flex;
    justify-content: flex-start;
}

Alinear objetos a la derecha

.flex-container{
    display: flex;
    justify-content: flex-end;
}

Distribuir los objetos de manera uniforme, pero alineados a la izquierda y derecha

.flex-container{
    display: flex;
    justify-content: space-between;
}

Distribuir los objetos de manera uniforme, dejando espacio a la izquierda y derecha

.flex-container{
    display: flex;
    justify-content: space-around;
}

Centrar objetos de manera vertical

.flex-container{
    display: flex;
    align-items: center;
    height: 300px;
}

Alinear hacia arriba los objetos (vertical)

.flex-container{
    display: flex;
    align-items: flex-start;
    height: 300px;
}

Alinear hacia abajo los objetos (vertical)

.flex-container{
    display: flex;
    align-items: flex-end;
    height: 300px;
}

Elementos ocupan todo el espacio vertical

<div class=“flex-container”>
     <div style=“order: 2; background-color: red;”>1</div>
     <div style=“order: 1; background-color: blue;”>2</div>
     <div style=“order: 4; background-color: green;”>3</div>
     <div style=“order: 3; background-color: yellow;”>4</div>
</div>

Definir si un elemento ocupará más espacio que el otro

<div class=“flex-container”>
     <div style=“flex-grow: 1; background-color: red;”>1</div>
     <div style=“flex-grow: 4; background-color: blue;”>2</div>
     <div style=“flex-grow: 1; background-color: green;”>3</div>
     <div style=“flex-grow: 4; background-color: yellow;”>4</div>
</div>

Definir el mínimo que debe medir un elemento

<div style="flex-basis: 400px; background-color: red;">1</div>

Centrado perfecto

.flex-container{
    display: flex;
    height: 300px;
    justify-content: center;
    align-items: center; 
}

Definir el porcentaje de espacio que ocupará cada elemento

<div class=“flex-container”>
    <div style=“flex: 30%; background-color: red;”>1</div>
    <div style=“flex: 70%;; background-color: blue;”>2</div>
</div>