Flex "Child"
Code Sources Icon Code Sources Icon

Flex regelt die Eltern-Kind-Beziehung ineninander verschachtelter HTML-Elemente. Ein Container-Element mit "display:flex;" zur "Flex-Box". Das wirkt auf die darin liegenden Elemente, die "Flex-Items". In der vertikalen erben die gleiche Höhe des Eltern-Elements. Zusätzlich kann den Breite der Kind-Elementen ein "Flex-Box"-Verhalten zugeteit werden. Mit "flex:1;" verteilen sich diese auf die gesamte mögliche Breite.


Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Anregung

Verändere den Wert der Eigenschaft "flex:1;", der den Boxen zugewiesen wurde:

flex:0;

Mit 0 oder 1 kannst du das Flex-Verhalten der Boxen ein- oder ausschalten.

Mit "flex:1;" werden alle Elemente auf die gleiche Breite gesetzt.

    #box1 {
        flex:1;
    }
    #box2 {
        flex:2;
    }
    #box3 {
        flex:3;
    }

Mit den flex-Angaben kann ein Verhältniss angegeben werden um die Boxen horizontal zu verteilen.

DB-Table: flex-child