Flexbox – Css3 – Elementos Padres

Vamos a conocer la magia de hacer sitios web flexibles con una hermosa propiedad de Css3, de ahora en adelante no ocuparemos más flotaciones para maquetar el sitio web, todo será mucho más fácil y divertido.

¿Qué es Flexbox?

Es una nueva forma de posicionar nuestros elementos en el sitio web, es mucho más fácil y utilizaremos menos código.

¿Qué tenemos que saber?

Flexbox tiene la siguiente estructura: un contenedor “padre” (que contiene a los elementos que deseamos posicionar) y contenedores “hijos” (que son los elementos flexibles).

Para designar una caja flexible al contenedor padre simplemente colocamos:

display : flex;

Haciendo esto, se define el elemento como contenedor flexible y todos sus “hijos” como elementos flexibles. El valor flex hace que el contenedor flexible sea un bloque dentro del elemento “padre” al que pertenezca.

En esta sección hablaremos de las propiedades que le podemos aplicar al contenedor “padre”.

Flex-direction: row | row-reverse | column | column-reverse;

flex-direction: row; es la propiedad por defecto y lo que nos permite es tener los elementos uno al lado del otro (parecido a como utilizábamos float left)

row-1

flex-direction: row-reverse; Coloca los elementos en línea pero de forma inversa

row-reverse

flex-direction: column; Coloca los elementos en forma de columna

column

flex-direction: column-reverse; Los elementos en columna pero invertido.

column-reverse

flex-wrap: wrap; respeta el ancho de los elementos hijos. (si tienes muchos elementos hijos se generarán diferentes líneas)

flex-wrap-wrap

flex-wrap: nowrap; Ajusta los elementos en una línea de forma dinámica (el ancho lo genera automáticamente).

flex-wrap-nowrap

Justify-content: flex-start | flex-end | center | space-between | space-around;

justify-content: Posiciona los elementos hijos horizontalmente.

justify-content: flex-start; Es la posición por defecto, por lo tanto posiciona a los elementos hijos al lado izquierdo del contenedor padre.

justify-content-flex-star

justify-content: flex-end; Posiciona los hijos al final del contenedor (derecha).

justify-content-flex-end

justify-content: center; Es la magia en persona ya que posiciona los elementos hijos centrados dentro del contenedor padre.

justify-content-center

justify-content: space-between; Genera un espacio entre los elementos hijos, en teoría siempre deja un elementos en “star” y otro en “end”, repartiendo el espacio restante entre los elementos.

justify-content-space-between

justify-content: space-around; Distribuye el espacio para todos iguales entre elementos incluyendo los margenes de la izquierda y derecha.

justify-content-space-around

Align-items: flex-start | flex-end | center | stretch | baseline

align-items: Posiciona los elementos hijos verticalmente.

align-items: flex-star; Posición por defecto, colocando los elementos hijos al inicio del contenedor padre.

justify-content-space-between

align-items: flex-end; Posiciona a los hijos al final del contenedor padre.

align-items-flex-end

align-items: center; Posiciona los elementos hijos al centro del contenedor verticalmente.

align-items-center

align-items: stretch; Para esta propiedad tienes que eliminar la altura de tus elementos hijos, ya que stretch abarcará el 100% de altura del contenedor padre, respetando el padding y margin.

align-items-stretch

align-items: baseline; Alinea los elementos según la base de la fuente, en la imagen podrás notar que todas las letras están alineadas en su base, independiente que la fuente de la caja del centro sea mayor.

align-items-baseline

align-content: flex-start | flex-end | center | stretch | space-between | space-around;

align-content: Ojo, solo funciona cuando hay más de una línea de elementos hijos. Es igual a la propiedad “aling-items”, por lo tanto tienes que elegir cual de las dos ocupar.

align-content: flex-start; Posiciona los elementos al inicio del contenedor padre.

align-content-flex-start

align-content: flex-end; Posiciona los elementos al final del contenedor.

align-content-flex-end

align-content: center; Posiciona los elementos centrados verticalmente.

align-content-center

align-content: space-between; Genera un espaciado dentro de las dos líneas o más.

align-content-space-between

align-content: space-around; Distribuye el espacio entre las líneas tanto al centro como los bordes.

align-content-space-around

align-content: stretch; Para esta propiedad tienes que eliminar la altura de tus elementos hijos, ya que stretch abarcará el 100% de altura del contenedor padre, respetando el padding y margin.

align-content-strech

En la siguiente sección veremos las propiedades de los elementos hijos.

Código Html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flex</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
	<div class="contenedor">
		<div class="hijo">A</div>
		<div class="hijo">B</div>
		<div class="hijo">C</div>
		<div class="hijo">C</div>
		<div class="hijo">C</div>
		<div class="hijo">C</div>
	</div>
</body>
</html>

Código Css

*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.contenedor{
	width: 80%;
	height: 500px;
	background: #FF5C29;
	margin: 50px auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: space-around;
}
.hijo{
	background: #00B285;
	width: 200px;
	height: 100px;
	color:#fff;
	margin: 30px;
	padding: 20px;
	font-size: 40px;
	text-align: center;
}

2 Comments

Comentarios cerrados.