/ CSS

Flexbox Una Propiedad de CSS3 Impresionante

Flexbox es una propiedad de CSS3 que nos permite ordenar nuestras etiquetas HTML de una manera fácil, esta propiedad nos brinda la posibilidad de crear diseños impresionantes sin mucho esfuerzo como lo hacíamos al usar la propiedad float para posicionar los tags que forman parte del diseño.

Este blog utiliza la propiedad Flexbox para mostrar los ítems de los artículos publicados en el layout del home.

Uso de Flexbox

El uso de Flexbox es sencillo, basta con aplicar esta propiedad al contenedor padre para que los ítems se orden automáticamente.

HTML

<section class="contenedor">
	<div class="item">
		<h2>Lorem ipsum.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
	<div class="item">
		<h2>Lorem ipsum dolor.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur.</p>
	</div>
	<div class="item">
		<h2>Lorem ipsum dolor sit.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
</section>

CSS

//Flex
.contenedor{
	display: flex;
}
//Solo para dar mejor presentación
.item{
	padding: 15px;
	border: thin solid #ABA8A8;
}
.item:not(:last-child){
	margin-right: 15px;
}

Basta con colocar la propiedad display: flex;, para obtener el siguiente resultado.

Display Flex

El resultado anterior se logro porque Flexbox tiene varias propiedades por defecto y cada propiedad tiene a su vez múltiples propiedades, las cuales iremos viendo cada una de ellas.

Recuerda que la combinación de estas propiedades dan diferentes resultados.

/*Flexbox: propiedades por defecto*/
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}


Propiedades de Flexbox

Ahora vamos a ver cada una de ellas.

FLEX-DIRECTION

Esta propiedad como su nombre lo dice se encarga de ordenar los ítems y tiene los siguientes valores: row, row-reverse, column, column-reverse.

/*Los ítem se mantienen uno al lado de otro de izquierda a derecha*/
{
 flex-direction: row;
}
/*Los ítem se mantienen uno al lado de otro de derecha a izquierda*/
{
 flex-direction: row-reverse;
}
/*Los ítem se apilan en columna una debajo de otra ocupando todo el espacio del contenedor padre*/
{
 flex-direction: column;
}
/*Los ítem se apilan en columna de manera invertida ocupando todo el espacio del contenedor padre*/
{
 flex-direction: column-reverse;
}

Demostración

flex-direction


FLEX-WRAP

Esta propiedad solo se aplica si el ancho combinado de los ítems es mayor que al del contenedor padre y cuenta con las siguientes propiedades: nowrap, wrap, wrap-reverse.

/*Los ítem se mantienen en la misma fila sin importar si
 el ancho combinado sea mayor que la del contenedor.*/
{
 flex-wrap: nowrap;
}
/*Acá depende del ancho combinado de los ítems, si 
es mayor se situara en la parte inferior.*/
{
 flex-wrap: wrap;
{
/*Al igual que la anterior propiedad depende del ancho 
combinado de los ítems, si es mayor se situara en 
la parte superior.*/
}
 flex-wrap: wrap-reverse;
}

Demostración

flex-wrap


JUSTIFY-CONTENT

Esta propiedad se encarga de la alineación de los ítems a lo largo del eje X, cuenta con las siguientes propiedades: flex-start, flex-end, center, space-around, space-between.

/*Alinea los ítems de izquierda a derecha (default)*/
{
  justify-content: flex-start;
}
/*Alinea los ítems de derecha a izquierda*/
{
  justify-content: flex-end;
}
/*Centra los ítems*/
{
  justify-content: center;
}
/*Alinea los ítems dejando margenes por ambos extremos del contenedor padre*/
{
  justify-content: space-around;
}
/*Alinea los ítems ocupando el 100% del contenedor padre*/
{
  justify-content: space-between;
}

Demostración

justify-content


ALIGN-ITEMS

Esta propiedad se encarga de la alineación de los ítems a lo largo del eje Y, cuenta con las siguientes propiedades: stretch, baseline, center, flex-start, flex-end.

/*Alineación de los ítems por defecto, la altura de los ítems es uniforme sin importar su contenido*/
{
  align-items: stretch;
}
/*Alinea los ítems dependiendo del contenido de cada ítem*/
{
  align-items: baseline;
}
/*Centra los ítems*/
{
  align-items: center;
}
/*Alinea los ítems de izquierda a derecha, desde la parte superior del contenedor padre*/
{
  align-items: flex-start;
}
/*Alinea los ítems de izquierda a derecha, desde la parte inferior del contenedor padre*/
{
  align-items: flex-end;
}

Demostración

align-items

ALIGN-CONTENT

Esta propiedad alinea los ítems siempre y cuando haya más de una fila de artículos, cuenta con las siguientes propiedades: stretch, center, flex-start, flex-end, space-around, space-between.

/*Alineación de los ítems por defecto*/
{
  align-content: stretch;
}
/*Centra los ítems*/
{
  align-content: center;
}
/*Alinea los ítems de izquierda a derecha, desde la parte superior del contenedor padre*/
{
  align-content: flex-start;
}
/*Alinea los ítems de izquierda a derecha, desde la parte inferior del contenedor padre*/
{
  align-content: flex-end;
}
/*Alinea los ítems en proporción del contenedor padre, no ocupa el 100%*/
{
  align-content: space-around;
}
/*Alinea los ítems en proporción del contenedor padre, ocupa el 100%*/
{
  align-content: space-between;
}

Demostración

align-content


Bueno mis amigos espero que se animen a utilizar la propiedad CSS3 Flexbox.

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más