CSS3-Adaptive-Layout-Technologie, flexible Größe

Das Rasterlayout unterstützt Flex-Size, eine gute adaptive Layout-Technologie.

Flex-Größen verwenden die Größeneinheit fr, die aus den ersten beiden Buchstaben des Wortes „Bruch“ oder „Brucheinheit“ stammt und einen Teil davon darstellt Gesamtraum.

Zum Beispiel die folgende CSS-Regel:

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

bedeutet, dass es 4 Spalten gibt, die erste Spalte hat eine feste Größe von 100 Pixel und der maximale Inhalt der dritten Spalte bedeutet die Größe Enthält nur die Elemente ohne Überlauf oder Umbruch. Die verbleibenden 2 Spalten haben alle flexible Größen.

Gemäß den Berechnungsregeln der elastischen Größe teilen sich die beiden den verbleibenden verfügbaren Raum gleichmäßig auf (die elastischen Koeffizienten dieser beiden Spalten sind gleich, beide sind 1).

CSS3-Demonstrationscode:

#grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
}
#title {
    background-color: lime;
}
#score {
    background-color: yellow;
}
#stats {
    background-color: lime;
}
#message {
    background-color: orange;
}
p {
    height: 80px;
    line-height: 80px;
    text-align: center;
}

HTML-Code:

<p id="grid">
    <p id="title">Site Logo</p>
    <p id="score">Slogan</p>
    <p id="stats">User Zone</p>
    <p id="message">Message</p>
</p>

Verwandte Empfehlungen:

Detaillierte Erklärung von Elastic Layout

Flexibles Layout

css3 Flexibles Layout

Das obige ist der detaillierte Inhalt vonCSS3-Adaptive-Layout-Technologie, flexible Größe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!