Para container

<< Flex Para items >>

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>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
    </div>
</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.

<< Flex Para items >>