DEV Community

loading...
4GeeksAcademy

FlexBox

Manuel Ortega Carcamo
Software Engineer, Full Stack developer, passionate about code, Surfing, Snowboard. Mostly working with Javascript and Nodejs. Mentor in 4Geeks Academy
・1 min read

¿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>
Enter fullscreen mode Exit fullscreen mode

Código css

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

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

}
Enter fullscreen mode Exit fullscreen mode

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;

Discussion (0)

Forem Open with the Forem app