Flexbox – Css3 – Elementos Hijos

En este apartado conoceremos las propiedades Flexbox pero de los elementos hijos.

Estás propiedades las aplicaremos a los div que se encuentran dentro del contenedor padre.

order:; Ordena los elementos hijos según el número que tu le designes.

flex-grow:; Especifica el factor de crecimiento de un elemento flexible. Se especifica qué cantidad de espacio debe ocupar el elemento dentro del contenedor flexible. Si todos los elementos tienen flex-grow 1, el espacio restante se distribuye entre los elementos.

flex-shrink:; Si utilizamos esta propiedad con valor “0” el elemento hijo no podrá hacerse más pequeño que su ancho establecido.

flex-basis:; Con esta propiedad podemos especificar el tamaño inicial que tendrá un elemento hijo.

flex:1 1 auto; Es la propiedad resumida de flex-grow, flex-shrink y flex-basis, generalmente se utiliza con la unidad “1 1 auto”.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Con aling-self podemos posicionar solo un elemento hijo, generando así diferentes posiciones para cada elemento.

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 otro">D</div>
	</div>
</body>
</html>

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: wrap;
	/*align-content: space-around;*/
}
.hijo{
	background: #00B285;
	width: 200px;
	height: 100px;
	color:#fff;
	margin: 30px;
	padding: 20px;
	font-size: 40px;
	text-align: center;
	/*flex-grow: 1;
	flex-shrink: 0;*/
	flex: 1 1 auto;
}
.otro{
	align-self: stretch;
	height: auto;
}