Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
CSS Flexbox (WebElement #35)
Vladimír Kriška
October 08, 2015
Programming
0
71
CSS Flexbox (WebElement #35)
Vladimír Kriška
October 08, 2015
Tweet
Share
More Decks by Vladimír Kriška
See All by Vladimír Kriška
ujovlado
0
6
ujovlado
0
370
ujovlado
3
120
ujovlado
0
48
ujovlado
0
36
ujovlado
0
32
ujovlado
0
62
ujovlado
0
440
ujovlado
0
42
Other Decks in Programming
See All in Programming
nkjzm
1
170
martysuzuki
1
390
pirosikick
4
950
itok
1
570
konstantin_diener
0
130
koheisakata
0
100
takahi5
1
420
yasaichi
31
7.8k
borkdude
2
180
xrdnk
0
110
afilina
PRO
0
140
joergneumann
0
130
Featured
See All Featured
ddemaree
273
31k
zakiwarfel
88
3.4k
jakevdp
775
200k
destraynor
223
47k
jmmastey
10
610
phodgson
87
3.9k
productmarketing
6
720
bkeepers
52
4.2k
denniskardys
219
120k
hannesfritz
28
950
philhawksworth
192
8.8k
swwweet
206
6.9k
Transcript
CSS FLEXBOX Vladimír Kriška (@ujovlado) WebElement #35
None
None
Classic “floats”
None
Flexbox applied* *and minor improvements: styled button, changed image position
None
Container, items, … source: http://www.w3.org/TR/css-flexbox-1/
flex-flow (shorthand) flex-direction • row, row-reverse, column, column-reverse • initial
value: row flex-wrap • nowrap, wrap, wrap-reverse • initial value: nowrap • flex-direction || flex-wrap
order • <int> • initial value: 0 • affects only
visual media (not speech) • use it for visual, not logical ordering
Single-line & multi-line Once content is broken into lines, each
line is independent
The “flex” property (shorthand) • none, [flex-grow && flex-shrink ||
flex-basis] • flex: none • 0 0 auto • flex: initial (this is an initial value) • 0 1 auto • flex: auto • 1 1 auto • flex: <int> • <int> 1 0% (e.g. flex: 10 => flex: 10 1 0%)
flex-grow & flex-shrink & flex-basis flex-grow how much the flex
item will grow relative to the rest of the flex items flex-shrink how much the flex item will shrink relative to the rest of the flex items flex-basis initial main size of the flex item, before free space is distributed according to the flex factors
flex: 1 0 20%* *with min-width applied and disabled max-width
min-width: 200px;
Different flex for each box* min-width: 200px; *with min-width applied
and disabled max-width
None
justify-content • flex-start, flex-end, center, space-between, space-around • initial value:
flex-start source: http://www.w3.org/TR/css-flexbox-1/
justify-content: center
None
align-items, align-self align-items • flex-start, flex-end, center, baseline, stretch •
initial value: stretch • applies to: containers align-self • auto, flex-start, flex-end, center, baseline, stretch • initial value: auto • applies to: items
align-items, align-self source: http://www.w3.org/TR/css-flexbox-1/
So, how to center div vertically?
None
Questions? No? Thank you!