Para items

<< Para container Ejemplos >>

Vamos a ver un ejemplo que usa las propiedades clave de los ítems flexibles (flex-grow, flex-shrink, flex-basis, order, align-self) y la propiedad gap del contenedor padre. El ejemplo simula una barra de herramientas o navegación con elementos de tamaño variable y orden personalizado.

El HTML que tenemos y el CSS planteamiento del CSS para resolver es el siguiente (sólo debéis rellenar los 7 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 a los hijos</title>
    <link rel="stylesheet" href="3.flex.css">
</head>

<body>
    <div class="flex-toolbar">
        <div class="item item-A">A. Base</div>
        <div class="item item-B">B. Crece (x3)</div>
        <div class="item item-C">C. Inicio</div>
        <div class="item item-D">D. Final</div>
    </div>
</body>

</html>

<< Para container Ejemplos >>