Model flexbox w CSS3

Plansza interaktywna październik 2014

URL:
http://www.plotkarka.eu/PI/css3-flexbox/
Autor:
Radosław Kowaluk

Elastyczność

Wyświetlanie
display:
flex; inline-flex;

Lorem

Lorem

Lorem

Lorem
Minimalna szerokość i/lub wysokość
min-width:, min-height:
auto;

Lorem

Lorem

Lorem

Lorem
Kierunek
flex-direction:
row;row-reverse;

L1

L2

L3

L1

L2

L3
column;column-reverse;

Lorem1

Lorem2

Lorem3

Lorem1

Lorem2

Lorem3

Właściwości bloków

flex-wrap
flex-wrap:
nowrap;wrap;wrap-reverse;

Lorem1

Lorem2

Lorem3

Lorem1

Lorem2

Lorem3

Lorem1

Lorem2

Lorem3
flex-flow
flex-flow:
flex-direction || flex-wrap

Lorem1

Lorem2

Lorem3
Kolejność
order:
integer

Lorem1

Lorem2

Lorem3

Lorem4
flex
flex:
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Lorem1

Lorem2

Lorem3

Właściwości kolumn

Właściwość flex-grow:
flex-grow: number

Lorem1

Lorem2

Lorem3
Właściwość flex-shrink:
flex-shrink: number

Lorem1

Lorem2

Lorem3
Właściwość flex-basis:
flex-basis: width

Lorem1

Lorem2

Lorem3

Wyrównywanie

Wyrównywanie wartością marginesu "auto"
margin:|margin-left:|margin-right:
auto

Lorem1

Lorem2

Lorem3
Właściwość justify-content:
justify-content: flex-start

L1

L2
flex-end

L1

L2

 center

L1

L2
space-between

L1

L2

 space-around

L1

L2

Właściwości kolumn

Właściwości align-items:
align-items: flex-start

L1

L2
baseline

L1

L2

 flex-end

L1

L2
stretch

L1

L2

 center

L1

L2
Właściwości align-self:
align-self:
auto

L1

L2

 flex-start

L1

L2
baseline

L1

L2

 flex-end

L1

L2
stretch

L1

L2

 center

L1

L2
Właściwości align-content:
align-self:
flex-start

L1

L2

 flex-end

L1

L2
center

L1

L2

 space-between

L1

L2
space-around

L1

L2

 stretch

L1

L2

Właściwości kolumn

[flexbox CSS3]
CSS Flexible Box Layout Module,
W3C Last Call Working Draft, 25 September 2014,
URL: http://www.w3.org/TR/css3-flexbox/