Heim  >  Artikel  >  Web-Frontend  >  CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

青灯夜游
青灯夜游nach vorne
2018-10-17 14:41:452656Durchsuche

In diesem Artikel erfahren Sie, wie Sie mehrere mehrspaltige Layouts mithilfe von Flex in CSS3 implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Grundlegendes dreispaltiges Layout

.container{
        display: flex;
        width: 500px;
        height: 200px;
    }
    .left{
        flex:1;
        background: red;
    }
    .middle{
        flex:1;
        background: green;
    }
    .right{
        flex:1;
        background: blue;
    }
<p>
    </p><p></p>
    <p></p>
    <p></p>

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

Drei Spalten mit fester Breite in der linken Mitte und adaptiver rechter Seite

    .container{
        display: flex;
        height: 300px;
    }
    .left{
        flex: 0 0 100px;
        background-color: red;
    }
    .middle{
        flex: 0 0 100px;
        background-color: green;
    }
    .right{
        flex:1;
        background-color: blue;
    }
  <p>
    </p><p>qqq</p>
    <p>qqq</p>
    <p>wwww</p>

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

Nach dem Verkleinern des Browserfensters

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

## Links und rechts fixiert, Mitte adaptiv##

    .container{
        display: flex;
        height: 300px;
    }
    .left{
        width: 100px;
        background-color: red;
    }
    .middle{
        flex: 1;
        background-color: green;
    }
    .right{
       width: 100px;
        background-color: blue;
    }
   <p>
    </p><p>qqq</p>
    <p>qqq</p>
    <p>wwww</p>

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

Nach dem Verkleinern des Browserfensters

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

Neun-Quadrat-Raster-Layout

    .container{
        display: flex;
        height: 300px;
        width: 300px;
        flex-direction: column;
    }
    .row{
        display: flex;
        height: 100px;
    }
    .left{
        flex: 1;
        height: 100px;
        border: 1px solid red;
    }
    .middle{
        flex: 1;
        height: 100px;
        border: 1px solid green;
    }
    .right{
        flex: 1;
        height: 100px;
        border: 1px solid blue;
    }
    <p>
    </p><p>
        </p><p></p>
        <p></p>
        <p></p>
    
    <p>
        </p><p></p>
        <p></p>
        <p></p>
    
    <p>
        </p><p></p>
        <p></p>
        <p></p>
    

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

Heiliger Gral-Layout

    *{
        margin:0;
        padding:0;
    }
    .container{
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: space-between;
    }
    .header{
        background: red;
        flex: 0 0 100px;
    }
    .content{
        display: flex;
        flex:1;
    }
    .content-left{
        flex: 0 0 100px;
        background: green;
    }
    .content-right{
        flex: 0 0 100px;
        background: pink;
    }
    .content-middle{
        flex:1;
    }
    .footer{
        background: yellow;
        flex: 0 0 100px;
    }
    <p>
    </p><p>Header</p>
    <p>
        </p><p>Left</p>
        <p>Center</p>
        <p>Right</p>
    
    <p>Footer</p>

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

Nach dem Verkleinern des Browserfensters

CSS3 Learning Flex implementiert mehrere mehrspaltige Layouts

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Weitere verwandte Tutorials finden Sie hier. Bitte besuchen Sie CSS-Grundlagen-Video-Tutorial, CSS3-Video-Tutorial, Bootstrap-Video-Tutorial!

Das obige ist der detaillierte Inhalt vonCSS3 Learning Flex implementiert mehrere mehrspaltige Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

In Verbindung stehende Artikel

Mehr sehen