Las propiedades de los contenedores Flexbox (I)


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Ya hace un tiempo que vimos las principales ventajas de Flexbox y sus aportaciones a CSS3, así que ahora queremos profundizar en algunos de sus aspectos más prácticos y funcionales para las tareas de Desarrollo Web y vamos a ver cómo aplicar las reglas de Flexbox y configurarlo para personalizar su comportamiento.

Como vimos en el artículo anterior sobre  los principales conceptos de Flexbox, este mecanismo de CSS3 se compone básicamente de dos partes  diferenciadas,  la caja contenedora y los propios elementos del contenido.  Y es el contenedor el que permite acomodar los elementos tal y como queramos según las propiedades que apliquemos. De este modo, podemos modificar la disposición de los elementos, su dimensión, etc.

 

Display flex

El contenedor principal en un esquema Flexbox es el que asignamos como display: flex, la propiedad que establece las reglas de cómo serán los hijos representados en la página. Es decir, los elementos de la página con la clase contenedor-flex se comportarán según las reglas de Flexbox y sólo se verán afectados sus hijos.

.contendor-flex {
 display: flex;
 }

Display inline-flex

El valor inline-flex hace que los elementos se comporten como un bloque pero que no se expandan para ocupar todo el espacio horizontal.

.contendor-flex {
 display: inline-flex;
 }

Flex-direction

Con esta propiedad definimos la dirección del flujo de colocación de los elementos y podemos decidir si se van a colocar en una misma fila, en una columna o indicar el orden de los items.

Podemos usar los siguientes valores:

  • row: Señala los elementos que colocamos en una fila, uno al lado de otro y de izquierda a derecha. Es el valor predeterminado.
  • row-reverse: como el anterior, pero le decimos que el orden sea de derecha a izquierda.
  • column: Elementos que colocamos uno debajo del otro, cuyo orden es primero los de arriba.
  • column-reverse: como el anterior, pero el orden es primero los de abajo.

El ejemplo del HTML a escribir sería el siguiente:

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

Los estilos que tenemos que aplicar al elemento con class=”flex-container”, sería algo como esto:

body {
 font-size: 2.2em;
 font-family: verdana;
 color: #ffffff;
 }
 .flex-container {
 display: flex;
 flex-direction: column-reverse;
 }
 .item {
 background-color: #3399ff;
 margin: 2px;
 padding: 4px;

  flex-grow: 1;
 }

Observa que hemos puesto los elementos uno debajo del otro con un orden “reverse” y contrario a cómo hemos escrito el HTML. Esto es lo que conseguiremos:

Flex-wrap

Si queremos saltos de línea entre los elementos que colocamos en el contenedor, utilizaremos esta propiedad. Éstos se colocan en el eje horizontal, en una fila, y si no caben por las dimensiones que tienen, el comportamiento Flex intentará que quepan sin realizar ese salto.

  • nowrap: no se producen saltos de línea. Es el valor predeterminado.
  • wrap: si no caben se colocan en la línea siguiente.
  • wrap-reverse: El salto de lína es hacia arriba.
.flex-container {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 }
 .item {
 background-color: #;
 width: 30%;
 padding: 4px;
 }

En el ejemplo hemos sugerido que la anchura sea de un 30%, aunque observa que en el HTML tenemos cuatro items dentro de flex-container y el resultado sería el siguiente:

Como no cabría en horizontal, se ajusta en una fila en el navegador.

Aunque si cambiamos a flex-wrap: wrap tendremos el salto de línea:

.flex-container {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 }

Como las propiedades del contenedor Flexbox dan para mucho, vamos a dejarlo aquí de momento. En próximos artículos seguiremos hablando de ello (y también de los items). ¡Permanece atento a nuestro blog!


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *