Einführung in relevante Kenntnisse des flexiblen dreispaltigen Layouts auf mobilen Endgeräten (Codebeispiel)

Was dieser Artikel Ihnen bringt, ist die Einführung relevanter Kenntnisse (Codebeispiele) über das flexible dreispaltige Layout. Ich hoffe, dass es einen gewissen Referenzwert hat hilfreich für Sie.

Standardmäßig wird zuerst die mobile Version angezeigt und die Bildschirmänderungen werden über das @media-Attribut

Flexbox-bezogene CSS-Attribute verwenden

1. display: flex; (übergeordnetes Element)

2. flex-wrap: nowrap | (übergeordnetes Element, übersteigt die Anzeige)

3. flex: flex-grow flex-shrink flex-basis (untergeordnete Elemente, wie man Platz für untergeordnete Elemente zuweist)

4. Reihenfolge: number; (untergeordnete Elemente, So ordnen Sie die Reihenfolge der untergeordneten Elemente an)

Wichtige Punkte

1. Festlegen

   Anzeige: Flex und flex-wrap: wrap

Verwenden Sie
2. flex

   , um die Raumzuordnung (Ausdehnung, Schrumpfungsverhältnis und Skalierungsbasis) anzupassen value) für untergeordnete Elemente

Passen Sie die Anzeigereihenfolge der untergeordneten Elemente über
3. order

   an (setzen Sie .center in die Mitte)

Beispiel

CSS

    .box {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .center {
        background-color: #f00;
        flex: 100% 1;
    }
    .left, .right {
        flex: 100% 1;
    }
    .left {
        background-color: #0f0;
    }
    .right {
        background-color: #00f;
    }
    @media all and (min-width: 400px) {
        .left, .right {
            flex: 50% 1;
        }
    }
    @media all and (min-width: 800px) {
        .box {
            flex-wrap: nowrap;
        }
        .center {
            order: 2;
            flex: 1;
        }
        .left, .right {
            flex: 0 0 300px;
        }
        .left {
            order: 1;
        }
        .right {
            order: 3;
        }
    }

HTML

<div class="box">
    <div class="center">
        弹性盒子是 CSS3 的一种新的布局模式。
        CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
        引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

Das obige ist der detaillierte Inhalt vonEinführung in relevante Kenntnisse des flexiblen dreispaltigen Layouts auf mobilen Endgeräten (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!