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/