Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Flexbox (WebElement #35)
Search
Vladimír Kriška
October 08, 2015
Programming
0
150
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
Twelve-Factor app with Docker
ujovlado
0
110
Design a REST API you will love to work with
ujovlado
0
740
Docker for PHP developers - Tips, Tricks & Lessons learned
ujovlado
3
470
Docker ‐ from development to production in minutes (PoSobota #91)
ujovlado
0
370
Non-traditional use of Docker (Nette Camp #3)
ujovlado
0
130
Contributions [lightning talk] (PyconCZ 2015)
ujovlado
0
84
Simplify your dev life with Docker (WebElement Banská Bystrica)
ujovlado
0
160
Don't underestimate CSS (WebElement #30)
ujovlado
0
580
Database Migrations in PHP (Posobota #66)
ujovlado
0
120
Other Decks in Programming
See All in Programming
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
PicoRuby on Rails
makicamel
2
140
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
7
2.4k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
990
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
330
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
CDK引数設計道場100本ノック
badmintoncryer
2
480
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
KATA
mclloyd
30
14k
Designing for humans not robots
tammielis
253
25k
Site-Speed That Sticks
csswizardry
10
700
Why Our Code Smells
bkeepers
PRO
337
57k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Automating Front-end Workflow
addyosmani
1370
200k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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!