So implementieren Sie schnell das BorderLayout-Layout mit FLEX in CSS3-CSS-Tutorial-php.cn

So implementieren Sie schnell das BorderLayout-Layout mit FLEX in CSS3

高洛峰

Freigeben： 2017-03-27 09:59:44

Original

1514 Leute haben es durchsucht

Das BoxLayout-Layout sollte Programmierern bekannt sein, die Back-End-UI-Code geschrieben haben, auch damit vertraut sein, einschließlich des HTML-Frames CSS, das relativ schwer zu kontrollieren war, ist komplizierter und erfordert das Hinzufügen weiterer Tags und Codes. Nachdem wir diese Schnittstelle gelesen haben, können wir mit dem Schreiben des Code-Layouts der Tags beginnen:

Der Code ist sehr einfach. Natürlich können Sie das übergeordnete Element auch entfernen und als übergeordnetes Element verwenden

<div class="parent">
    <header>北</header>
    <aside class="left">东</aside>
    <div class="center">中</div>
    <aside class="righ">西</aside>
    <footer>南</footer>
</div>

Nach dem Login kopieren

Dann beginnen wir mit der Verwendung von CSS Um BoxLayout zu implementieren, wird hier auch das übergeordnete Element definiert. Das übergeordnete Element ist ein Flex-Container, die Richtung ist von links nach rechts und kann umbrochen werden.

Legen Sie dann den Layoutmodus der Flex-Elemente fest. Kopf- und Fußzeile. Wir setzen sie auf „Flex-Basis: 100 %“. Da sie die gesamte Zeile einnehmen und die Breite der beiden Seiten gleich ist und die Mitte breiter ist als die Seiten auf beiden Seiten, verwenden wir „Flex-Grow“. um ihr Belegungsverhältnis festzulegen.

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}

Nach dem Login kopieren

Auf diese Weise wird das BoxLayout-Layout implementiert. Vergessen Sie nicht, die entsprechende Höhe und Hintergrundfarbe festzulegen, sonst werden Sie es tun Ich sehe alles weiß und denke, dass es keine Reaktion gibt! Ich habe es als Referenz so eingerichtet

header, footer{
    flex-basis: 100%;
}.center{
    flex-grow: 3;
}aside{
    flex-grow:1;
}

Nach dem Login kopieren

Abschlusstest OK!

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}header,footer,aside,.center{
    padding: 10px;;
}.center,aside{
    min-height: 300px;
}header, footer{
    flex-basis: 100%;
    min-height: 80px;
}header{
    background-color: cadetblue;
}footer{
    background-color: darkgrey;
}.center{
    flex-grow: 3;
}aside{
    flex-grow:1;
    background-color: bisque;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie schnell das BorderLayout-Layout mit FLEX in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!