Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie einen FlexBox-Standard und einen kompatiblen Schreib-Spickzettel

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

高洛峰
高洛峰Original
2017-03-16 11:02:321210Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn