FlexBox

¿Que es Flexbox?

es un conjunto de nuevos atributos (propiedades) y valores de CSS que podemos aplicar a los elementos de una página y que permiten simplificar la forma en que los posicionamos y se adaptan a los distintos dispositivos.

¿Como empiezo a usarlo?

Para usarlo debo crear un contenedor y todo los elementos dentro tendrán las propiedades de Flexbox.

El siguiente ejemplo crea un contenedor que se aplica a la etiqueta html section usando css.

Código html

  <section>
     <article>1</article>
     <article>2</article>
     <article>3</article>
     <article>4</article>
  </section>

Código css

section{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

article{
    background-color: #9ef;
    padding: 3px;
    margin: 5px;
    width: 40%;

}

En el código css se puede ver que a la etiqueta section se aplican 3 propiedades de flexbox:

• display: flex; que indica que esta etiqueta será un contenedor flexbox
• flex-direction: row; Indica que los elementos dentro de este contenedor tendrán una dirección en forma de filas
• flex-wrap: wrap; Si el elemento no tiene espacio pasará a la siguiente linea.

Acá esta el código del ejercicio

¿Qué más puedo hacer?

• Cambia la propiedad flex-direction: row; por flex-direction: column;

• Cambia la propiedad flex-wrap: wrap; por flex-wrap: nowrap;