Para container
Vamos a ver un ejemplo que utiliza las propiedades del contenedor padre de Flexbox: flex-direction, flex-wrap, justify-content y align-items. Este código organiza 8 tarjetas en un contenedor central, aplicando una alineación y distribución.
El HTML que tenemos y el CSS planteamiento del CSS para resolver es el siguiente (sólo debéis rellenar los 6 puntos comentados para obtener el siguiente resultado):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplos propiedades al contenedor</title>
<link rel="stylesheet" href="2.flex.css">
</head>
<body>
<main>
<article class="flex-item item1">1</article>
<article class="flex-item">2</article>
<article class="flex-item">3</article>
<article class="flex-item">4</article>
<article class="flex-item">5</article>
<article class="flex-item">6</article>
<article class="flex-item">7</article>
<article class="flex-item item8">8</article>
</main>
</body>
</html>El resultado es un conjunto de tarjetas que se organizan en múltiples columnas, centradas horizontalmente, y distribuidas verticalmente de manera espaciada, con el ítem '1' en la parte inferior de la primera columna y el ítem '8' en la parte superior de la última columna.
