CSS Flex mehrere mehrspaltige Layouts

Grundlegendes dreispaltiges Layout

.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>

Drei Spalten mit fester Breite links und in der Mitte und adaptiver Breite rechts

    .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>

Nach dem Verkleinern des Browserfensters

Links und rechts fest, in der Mitte adaptiv

  .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>

Nach dem Verkleinern des Browserfensters

Neun-Raster-Layout

.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>

Heiliger Gral-Layout

  *{
        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>

Nach dem Verkleinern des Browserfensters

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Lösung für das Problem, dass Nacos keine Verbindung zu MySQL herstellen kann

>>: Implementierung des Vue-Zählers