¿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;
porflex-direction: column;
Cambia la propiedad
flex-wrap: wrap;
porflex-wrap: nowrap;
Top comments (0)