CSS Flex mehrere mehrspaltige Layouts

.Container{
        Anzeige: Flex;
        Breite: 500px;
        Höhe: 200px;
    }
    .links{
        biegen: 1;
        Hintergrund: rot;
    }
    .Mitte{
        biegen: 1;
        Hintergrund: grün;
    }
    .Rechts{
        biegen: 1;
        Hintergrund: blau;
    }
<div Klasse="Container">
    <div Klasse="links"></div>
    <div Klasse="Mitte"></div>
    <div Klasse="rechts"></div>
</div>

    .Container{
        Anzeige: Flex;
        Höhe: 300px;
    }
    .links{
        flexibel: 0 0 100px;
        Hintergrundfarbe: rot;
    }
    .Mitte{
        flexibel: 0 0 100px;
        Hintergrundfarbe: grün;
    }
    .Rechts{
        biegen: 1;
        Hintergrundfarbe: blau;
    }
  <div Klasse="Container">
    <div Klasse="links">qqq</div>
    <div Klasse="Mitte">qqq</div>
    <div Klasse="rechts">www</div>
</div> 

  .Container{
        Anzeige: Flex;
        Höhe: 300px;
    }
    .links{
        Breite: 100px;
        Hintergrundfarbe: rot;
    }
    .Mitte{
        biegen: 1;
        Hintergrundfarbe: grün;
    }
    .Rechts{
       Breite: 100px;
        Hintergrundfarbe: blau;
    }
   <div Klasse="Container">
    <div Klasse="links">qqq</div>
    <div Klasse="Mitte">qqq</div>
    <div Klasse="rechts">www</div>
</div> 

.Container{
        Anzeige: Flex;
        Höhe: 300px;
        Breite: 300px;
        Flex-Richtung: Spalte;
    }
    .Reihe{
        Anzeige: Flex;
        Höhe: 100px;
    }
    .links{
        biegen: 1;
        Höhe: 100px;
        Rand: 1px durchgehend rot;
    }
    .Mitte{
        biegen: 1;
        Höhe: 100px;
        Rand: 1px durchgehend grün;
    }
    .Rechts{
        biegen: 1;
        Höhe: 100px;
        Rand: 1px durchgehend blau;
    }
    <div Klasse="Container">
    <div Klasse="Zeile">
        <div Klasse="links"></div>
        <div Klasse="Mitte"></div>
        <div Klasse="rechts"></div>
    </div>
    <div Klasse="Zeile">
        <div Klasse="links"></div>
        <div Klasse="Mitte"></div>
        <div Klasse="rechts"></div>
    </div>
    <div Klasse="Zeile">
        <div Klasse="links"></div>
        <div Klasse="Mitte"></div>
        <div Klasse="rechts"></div>
    </div>
</div> 

  *{
        Rand: 0;
        Polsterung: 0;
    }
    .Container{
        Anzeige: Flex;
        Flex-Richtung: Spalte;
        Mindesthöhe: 100vh;
        Inhalt ausrichten: Abstand dazwischen;
    }
    .header{
        Hintergrund: rot;
        flexibel: 0 0 100px;
    }
    .Inhalt{
        Anzeige: Flex;
        biegen: 1;
    }
    .Inhalt links{
        flexibel: 0 0 100px;
        Hintergrund: grün;
    }
    .Inhalt-rechts{
        flexibel: 0 0 100px;
        Hintergrund: rosa;
    }
    .Inhalt-Mitte{
        biegen: 1;
    }
    .Fußzeile{
        Hintergrund: gelb;
        flexibel: 0 0 100px;
    }
    <div Klasse="Container">
    <div class="header">Kopfzeile</div>
    <div Klasse="Inhalt">
        <div class="content-left">Links</div>
        <div class="content-middle">Mitte</div>
        <div class="content-right">Rechts</div>
    </div>
    <div class="footer">Fußzeile</div>
</div>