Heim > Artikel > Web-Frontend > Teilen Sie einen FlexBox-Standard und einen kompatiblen Schreib-Spickzettel
FlexBox-Standardschrift:
Unterstützte Browser: IE11, Chrome29+, Firefox 20+, Safari plus Präfix -webkit-
Übersicht:
Insgesamt gibt es 12 Attribute;
Es gibt 6 oder 5 Einzelattribute für den Container, die jeweils die Richtung der Elementanordnung, Zeile, horizontale Anordnung, vertikale Anordnung, Leerzeichenverteilung und ein abgekürztes Attribut Richtung definieren , Zeile
6, 5 einzelne Attribute über die Elemente im Container, die jeweils die Reihenfolge, Erweiterung, Kontraktion, Anfangsgröße, Ausrichtung, und definieren eine Kurzattributbeschreibung Elementgröße
Container: Anzeige: flex |. inline-flex; |
Beschreibung |
|||||||||||||||||||||||||||||||||||||||||
Flex-Richtung: Reihenumkehr |. Spaltenumkehr |
Die Anordnungsrichtung der Elemente im Container |
|||||||||||||||||||||||||||||||||||||||||
flex -wrap: nowrap |. wrap-reverse |
Das Element wird in einer oder mehreren Zeilen angezeigt |
|||||||||||||||||||||||||||||||||||||||||
flex-flow: |
Abkürzung der beiden oben genannten Attribute | |||||||||||||||||||||||||||||||||||||||||
Horizontale Verteilung der Elemente innerhalb des Containers |
||||||||||||||||||||||||||||||||||||||||||
align-items flex-start |. baseline |
In vertikaler Richtung Die Verteilung der Elemente innerhalb des Containers |
|||||||||||||||||||||||||||||||||||||||||
align-content flex-start |. space-around |
Verteilung von zusätzlichem Leerraum innerhalb des Containers
|
|||||||||||||||||||||||||||||||||||||||||
Containerelemente:
|
||||||||||||||||||||||||||||||||||||||||||
Bestellung: |
Die Anordnungsreihenfolge der Elemente im Container
| |||||||||||||||||||||||||||||||||||||||||
align-selfflex-start | 🎜 >Überschreiben Sie den Wert von align-items und definieren Sie seine eigene Verteilung in vertikaler Richtung |
flex -grow : | |||||||||||||||||||||||||||||||||||||||||
Die Ausdehnung des vom Element eingenommenen Platzes im Container |
flex-shrink : | |||||||||||||||||||||||||||||||||||||||||
Die Schrumpfung des vom Element eingenommenen Raums im Behälter |
flex-basis : |
|||||||||||||||||||||||||||||||||||||||||
Bei der Initialisierung die Größe des Elements im Container | flex: |
|||||||||||||||||||||||||||||||||||||||||
Abkürzungen für die oben genannten drei Attribute
* Die obige *Der erste Wert jedes Attributs ist der Standardwert; *Blau ist der Abkürzungsmodus für mehrere Attribute;
Kompatibel mit IE10: Präfix hinzufügen -ms-
* Es wird nicht empfohlen, es vor IE10 zu verwenden. Sie können display:table;
Über Chrome unterstützt die alte Firefox-Version: FireFox: Ersetzen Sie-webkit- durch -moz-, um
|
Das obige ist der detaillierte Inhalt vonTeilen Sie einen FlexBox-Standard und einen kompatiblen Schreib-Spickzettel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!