So erstellen Sie ein einfaches Säulendiagramm mit Flex-Layout in CSS

<div Klasse="seine_Box">
    <div>Histogramm der Punkteverteilung</div>
    <div Klasse="Histogramm">
        <div><div>10</div></div>
        <div><div>8</div></div>
        <div><div>15</div></div>
        <div><div>12</div></div>
        <div><div>5</div></div>
    </div>
</div>

.seine_box{ /*box*/
            Breite: 400px;
            Höhe: 220px;
            Rand: durchgezogen 1px #1E90FF;
            Anzeige: Flex;
            Flex-Richtung: Spalte;
            Elemente ausrichten: zentrieren;
        }
        .histogram{ /*Histogramm*/
            Anzeige: Flex;
        }
        .histogram>div{ /*eine Kachel*/
            Breite: 30px;
            Höhe: 200px; /*Blockhöhe bei 100 %*/
            Schriftgröße: 14px;
            Textausrichtung: zentriert;
            Rand rechts: 5px;
            Anzeige: Flex;
            Flex-Richtung: Spalte umkehren;
        }
        .histogram>div:nth-child(3n) div{ /*Kachelfarbe*/
            Hintergrundfarbe: #ff404b;
        }
        .histogram>div:n-tes-Kind(3n+1)div{
            Hintergrundfarbe: #99CCFF;
        }
        .histogram>div:n-tes-Kind(3n+2)div{
            Hintergrundfarbe: #F0AD4E;
        }
        .histogram>div:n-tes-Kind(1)div{
            flex: 0 0 50 %; /*20 ist 100 %, 50 % ist 10*/
        }
        .histogram>div:n-tes-Kind(2)div{
            flex: 0 0 40 %; /*8/20*/
        }
        .histogram>div:n-tes-Kind(3)div{
            flex: 0 0 75 %; /*15/20*/
        }
        .histogram>div:n-tes-Kind(4)div{
            flex: 0 0 60 %; /*12/20*/
        }
        .histogram>div:n-tes-Kind(5)div{
            flex: 0 0 25 %; /*5/20*/
        }

.seine_box{ /*box*/
            Breite: 400px;
            Höhe: 220px;
            Rand: durchgezogen 1px #1E90FF;
            Anzeige: Flex;
            Flex-Richtung: Spalte;
            Inhalt ausrichten: Abstand dazwischen;
        }
        .seine_box>div{
            Textausrichtung: zentriert;
        }
        .histogram{ /*Histogramm*/
            Anzeige: Flex;
            Flex-Richtung: Spalte;
        }
        .histogram>div{ /*eine Kachel*/
            Höhe: 30px;
            Breite: 200px; /*Blockbreite bei 100 %*/
            Zeilenhöhe: 30px;
            Schriftgröße: 14px;
            Textausrichtung: rechts;
            Rand unten: 5px;
            Anzeige: Flex;
        }
        .histogram>div:nth-child(3n) div{ /*Kachelfarbe*/
            Hintergrundfarbe: #ff404b;
        }
        .histogram>div:n-tes-Kind(3n+1)div{
            Hintergrundfarbe: #99CCFF;
        }
        .histogram>div:n-tes-Kind(3n+2)div{
            Hintergrundfarbe: #F0AD4E;
        }
        .histogram>div:n-tes-Kind(1)div{
            flex: 0 0 50 %; /*20 ist 100 %, 50 % ist 10*/
        }
        .histogram>div:n-tes-Kind(2)div{
            flex: 0 0 40 %; /*8/20*/
        }
        .histogram>div:n-tes-Kind(3)div{
            flex: 0 0 75 %; /*15/20*/
        }
        .histogram>div:n-tes-Kind(4)div{
            flex: 0 0 60 %; /*12/20*/
        }
        .histogram>div:n-tes-Kind(5)div{
            flex: 0 0 25 %; /*5/20*/
        }