CSS FLEX
===

https://www.youtube.com/watch?v=F-KCncXMPk0

# RESUMEN:

### flex-direction: column - row
### flex-wrap: wrap(varias lineas) - nowrap(misma linea)

### justify-content: (centra horizontal)

### aligne-items: (centra vertical)
esta propiedad solo funciona para una linea, por ejemplo cuando usamos flex-direction: row

### aligne-content:
esta propiedad solo funciona para varias lineas, por ejemplo cuando usamos flex-wrap: wrap

---

# html sin flex

<style>
    .container{
        width: 500px;
        height: 200px;
        background: #fff;
        padding: 10px;
        border: 10px solid #ccc;
        margin: 20px;
    }

    .elemento{
        color: #fff;
        margin: 5px;
        background: orange;
        width: 50px;
    }
</style>

<p>Casi siempre las propiedades css de flex se aplican en el contenedor.</p>

<div class="container">
    <div class="elemento elemento1">1</div>
    <div class="elemento elemento2">2</div>
    <div class="elemento elemento3">3</div>
    <div class="elemento elemento4">4</div>
</div>

##### los elementos se ven:

# html con flex

agregamos a la clase .container
- display: flex

##### los elementos se ven:


con esto le decimos a css que queremos que las cajas de dentro sean flexibles.

el alto de los hijos es igual que el de los padres.

# html con flex-direction
ordena los divs que están dentro del container

Opciones:
- column
- row
- row-reverse
- column-reverse

-- Ejemplo: flex-direction: row; (por defecto)

<style>
    .container{
        width: 500px;
        height: 200px;
        background: #fff;
        padding: 10px;
        border: 10px solid #ccc;
        margin: 20px;
        display: flex;
        flex-direction: row;
    }

    .elemento{
        color: #fff;
        margin: 5px;
        background: orange;
        width: 50px;
        height: 50px;
    }
</style>

<div class="container">
    <div class="elemento elemento1">1</div>
    <div class="elemento elemento2">2</div>
    <div class="elemento elemento3">3</div>
    <div class="elemento elemento4">4</div>
</div>

##### los elementos se ven:

### flex-direction: row-reverse;

<style>
    .container{
        width: 500px;
        height: 200px;
        background: #fff;
        padding: 10px;
        border: 10px solid #ccc;
        margin: 20px;
        display: flex;
        flex-direction: row-reverse;
    }

    .elemento{
        color: #fff;
        margin: 5px;
        background: orange;
        width: 50px;
        height: 50px;
    }
</style>

<div class="container">
    <div class="elemento elemento1">1</div>
    <div class="elemento elemento2">2</div>
    <div class="elemento elemento3">3</div>
    <div class="elemento elemento4">4</div>
</div>

##### los elementos se ven:

- los elementos se ven ordenados al reves

### Ejemplo flex-direction: column;

<style>
    .container{
        width: 500px;
        height: 200px;
        background: #fff;
        padding: 10px;
        border: 10px solid #ccc;
        margin: 20px;
        display: flex;
        flex-direction: column;
    }

    .elemento{
        color: #fff;
        margin: 5px;
        background: orange;
        width: 50px;
        height: 50px;
    }
</style>

<div class="container">
    <div class="elemento elemento1">1</div>
    <div class="elemento elemento2">2</div>
    <div class="elemento elemento3">3</div>
    <div class="elemento elemento4">4</div>
</div>

##### los elementos se ven:

con la propiedad column-reverse hacemos lo mismo que row-reverse pero en vertical


si le agregamos al width el 100% el resultado seria:


# html con flex-wrap
Opciones:
- nowrap (los elementos se quedan en la misma linea)
- wrap (los elementos se bajan) (por defecto)
- wrap-reverse

### Ejemplo flex-wrap: wrap;

<style>
    .container{
        width: 500px;
        height: 200px;
        background: #fff;
        padding: 10px;
        border: 10px solid #ccc;
        margin: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .elemento{
        color: #fff;
        margin: 5px;
        background: orange;
        width: 200px;
        height: 50px;
    }
</style>

<p>Casi siempre las propiedades css de flex se aplican en el contenedor.</p>

<div class="container">
    <div class="elemento elemento1">1</div>
    <div class="elemento elemento2">2</div>
    <div class="elemento elemento3">3</div>
    <div class="elemento elemento4">4</div>
</div>

si tenemos los elementos del container mas grandes que el container los elementos se bajan.

Es decir que ahora con 4 elementos de 200px x 4 = 800px por tanto quedaría mas grande del container que mide 500px por eso los baja.

### Ejemplo flex-wrap: nowrap;

Con la propiedad nowrap se quedan todos los elemntos en la misma linea/fila pero se ajutan a los 500px del padre, por tanto cada elemento queda de 115px por que tambien hay espacios y no respeta los 200px originales.


si seguimos agregando elementos siempre seguiran en la misma linea/fila ajustandose al ancho del padre.


la opcion de wrap-reverse se comporta como wrap pero ordena los elementos al reves.

# html con justify-content

centra los elementos horizontalmente

opciones:
- flex-start (por defecto)
- flex-end
- center
- space-around
- space-between

### Ejemplo justify-content: flex-start;

<style>
    .container{
        width: 500px;
        height: 200px;
        background: #fff;
        padding: 10px;
        border: 10px solid #ccc;
        margin: 20px;
        display: flex;
        
        justify-content: flex-start;
    }

    .elemento{
        color: #fff;
        margin: 5px;
        background: orange;
        width: 50px;
        height: 50px;
    }
</style>

<p>Casi siempre las propiedades css de flex se aplican en el contenedor.</p>

<div class="container">
    <div class="elemento elemento1">1</div>
    <div class="elemento elemento2">2</div>
    <div class="elemento elemento3">3</div>
    <div class="elemento elemento4">4</div>
</div>

##### los elementos se ven:

### Ejemplo justify-content: flex-end;


### Ejemplo justify-content: center;


### Ejemplo justify-content: space-around;


### Ejemplo justify-content: space-between;


Con solo dos elementos: los reparte hacia afuera.


# html con aligne-items

centra los elementos verticalmente

opciones:
- flex-start (por defecto)
- flex-end
- center
- space-around
- space-between

### Ejemplo aligne-items: center;

<style>
    .container{
        width: 500px;
        height: 200px;
        background: #fff;
        padding: 10px;
        border: 10px solid #ccc;
        margin: 20px;
        display: flex;

        justify-content: center;

        align-items: center;
    }

    .elemento{
        color: #fff;
        margin: 5px;
        background: orange;
        width: 50px;
        height: 50px;
    }
</style>

<p>Casi siempre las propiedades css de flex se aplican en el contenedor.</p>

<div class="container">
    <div class="elemento elemento1">1</div>
    <div class="elemento elemento2">2</div>
    <div class="elemento elemento3">3</div>
    <div class="elemento elemento4">4</div>
</div>

##### los elementos se ven:


### Ejemplo aligne-items: stretch;

los elementos hijos no pueden tener height fijo, debe ser automatico y siempre abarca el total del height.


y si le agregamos al container:

flex-direction: column;

justify-content: center;

align-items: stretch;

queda:

# html con aligne-content

centra los elementos dentro del container sirve mas que nada si hay mas de una fila.

opciones:
- flex-start (por defecto)
- flex-end
- center
- space-around
- space-between

### Ejemplo aligne-content: center;

<style>
    .container{
        width: 500px;
        height: 200px;
        background: #fff;
        padding: 10px;
        border: 10px solid #ccc;
        margin: 20px;

        display: flex;
        flex-wrap: wrap;
        align-content: center;
        
        justify-content: center;
    }

    .elemento{
        color: #fff;
        margin: 5px;
        background: orange;
        width: 200px;
    }
</style>

<p>Casi siempre las propiedades css de flex se aplican en el contenedor.</p>

<div class="container">
    <div class="elemento elemento1">1</div>
    <div class="elemento elemento2">2</div>
    <div class="elemento elemento3">3</div>
    <div class="elemento elemento4">4</div>
</div>


### aligne-items para una fila y aligne-content para muchas filas.