Die Flexbox - display:flex

Bedenken Sie das nur die modernsten Browser den kompletten Syntax das Flexible Box Layout Module Level 1 (Recommendation, 19 October 2017) verstehen. Werden die Eigenschaften flex-wrap, flex-flow und align-content nicht genutzt kann nach dem 2012 Syntax (altes Flexbox Modell) gearbeitet werden. Um eine breitere Unterstützung zu gewährleisten sollten zwingend Browserspezifische angaben gesetzt werden (Vendor-Prefixe).

Eigenschaften für die Flex-Container(Elternelemente)

flex-direction: ( Werte für den Flex-container )

1

2

3

4

5

flex-wrap: ( Werte für den Flex-container )

1

2

3

4

5

align-items: ( Werte für den Flex-container )

1

2

3

4

5

justify-content: ( Werte für den Flex-container )

1

2

3

4

5

align-content: ( Werte für den Flex-container )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Eigenschaften für Kinderelemente der Flex-Container

align-self: ( Werte für Flex-Box Kinderelemente )

1

2

3

4

5

flex-grow: ( Werte für Flex-Box Kinderelemente )

1

2

3

4

5

flex-shrink: ( Werte für Flex-Box Kinderelemente )

1

2

3

4

5

flex ( Werte für Flex-Box Kinderelemente )

.item { flex: flex-grow [flex-shrink] [flex-basis]; } - Kurzschreibweise

element 1element 2

1

2

order: ( Werte für Flex-Box Kinderelemente )

1

2

3

4

5