Teilen Sie einen FlexBox-Standard und einen kompatiblen Schreib-Spickzettel-CSS-Tutorial-php.cn

Teilen Sie einen FlexBox-Standard und einen kompatiblen Schreib-Spickzettel

高洛峰

Freigeben： 2017-03-16 11:02:32

Original

1243 Leute haben es durchsucht

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

0 flex:

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: Standard:

Abkürzung der beiden oben genannten Attribute

nurwenny-Inhalt: Flex-Ende |. space-between |. space-around

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: 0

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

: auto

Bei der Initialisierung die Größe des Elements im Container

; <0 1 auto>

Abkürzungen für die oben genannten drei Attribute

* Die obige unterstützt keine negativen Werte;

*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-

-ms-flex-wrap Nicht unterstützt-ms-flex-pack

display:-ms-flexbox \|. -ms-inline-flexbox;	Standard (Orange ist das Artikelattribut)
-ms-flex-direction : row-reverse \| > flex-direction
: keine Wrap-Reverse Flex-Wrap
flex -flow
: Anfang \|. Ende \|Mitte \| -ms-flex-align	: Streckenanfang \| 🎜>
align-item s-ms-flex-line-pack	: Ende \|Grundlinie	align-content
-ms-flex-order :	Bestellung
-ms-flex-item-align : dehnen \| Start \| Ende \|Mitte \| Grundlinie	align-self
- ms-flex : \|\| keine	flex : 0 0 auto

* 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

Flex-Flowjustify -contentalign-content stretch |. flex- end |. baselineBestellen-webkit-box-flex

Container: Anzeige: -webkit-flexbox \| -webkit-inline-flexbox;	Standard (Orange ist das Artikelattribut)
-webkit -box-direction : normal \| : horizontal \|. vertikal Flex-Richtung	Nicht unterstützt
	-webkit -box-pack flex-end \|
	unterstützt
-webkit-box-align:	align-items
-webkit-box-ordinal-group:
	: 1	flex-grow
-webkit-flex-shrink: 0	flex-shrink
-webkit-flex-basis: auto (无-moz-)	flex-basis
-webkit-box: <1 0 auto>	flex
不支持	align-self

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!