CSS3-Flex-Layout-Studienhandbuch für mobile Webseiten

Mit Flexbox können wir normalerweise das Unterelement-Layout besser bedienen. Hier finden Sie eine kleine Verfeinerung des CSS3-Flex-Layout-Studienhandbuchs für mobile Webseiten

1 , beginnen Sie mit der Verwendung des Flexbox-Layouts. Der Code lautet wie folgt:

footer{   
display:flex;   
}

2. Fügen Sie als Nächstes das Flex-Flow-Attribut zur Fußzeile hinzu:

flex-flow:row wrap;

row bedeutet Anzeige in Zeilen, und wrap legt fest, ob umgebrochen werden soll, wenn das übergeordnete Element zu klein ist.
Beachten Sie, dass Flex-Flow zusammen mit den beiden Attributen Flex-Direction und Flex-Wrap definiert wird. Sie können auch separat festgelegt werden.
Attribute der Flex-Richtung:
Zeile: Zeilen-Umkehrung/Spalte-Umkehrung: Anzeige in umgekehrter Richtung

3 - Artikelattribute:
Flex-Start: Den Kopf jedes P ausrichten
Flex-End: Den Schwanz jedes P ausrichten
Mitte: Basierend auf der Mittellinie ausrichten
Strecken: Füllen Der gesamte Bereich, d. h. Kopf und Ende, sind ausgerichtet

4 Das Justify-Content-Attribut
wird verwendet, um die Form des Leerraums festzulegen Produktionslinie, es ist sehr praktisch, wenn mit mehreren Teilen gearbeitet wird.
Wenn im übergeordneten P beispielsweise drei kleine Ps nebeneinander angezeigt werden, deren Gesamtbreite jedoch geringer ist als die Gesamtbreite des übergeordneten P, können Sie diese Methode für das Layout verwenden. Die spezifischen Parameter lauten wie folgt :
Flex-Start: Leerzeichen ganz am Ende
Flex-End: Der leere Teil ist ganz am Anfang
Die beiden oben genannten Methoden zum Ausblenden behandeln die drei kleinen ps als Ganzes und lassen das Leerzeichen an einem Ende
space- between: Gleichmäßiger Abstand in der Mitte
space-around: Gleichmäßiger Abstand in der Mitte + auf beiden Seiten
Die beiden oben genannten entsprechen der Aufteilung der drei p-Blöcke und deren gleichmäßiger Aufteilung in das übergeordnete S. Der einzige Unterschied zwischen den beiden besteht darin, dass auf beiden Seiten kein Leerraum übrig bleibt
Anhang: So verwenden Sie justify-content, um das Element vertikal und horizontal zu zentrieren

p{   
justify-content:center;   
align-items:center;   
display:-webkit-flex;   
}

Das obige ist der detaillierte Inhalt vonCSS3-Flex-Layout-Studienhandbuch für mobile Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!