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
Flexbox
Search
Matija Marohnić
July 05, 2017
Programming
0
41
Flexbox
Matija Marohnić
July 05, 2017
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
130
Cypress vs. Playwright
silvenon
0
150
Studying Strapi: an open source head headless CMS
silvenon
0
35
CSS Specificity
silvenon
0
28
Make your JavaScript projects more accessible to newcomers
silvenon
0
72
React Hooks
silvenon
0
71
PostCSS
silvenon
0
42
CSS Custom Properties
silvenon
0
39
Maintainable Integration Testing in React
silvenon
0
30
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Goで作る、開発・CI環境
sin392
0
260
CDK引数設計道場100本ノック
badmintoncryer
2
450
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
770
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
ニーリーにおけるプロダクトエンジニア
nealle
0
930
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
230
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
480
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
260
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Docker and Python
trallard
45
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building Applications with DynamoDB
mza
95
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Scaling GitHub
holman
460
140k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Language of Interfaces
destraynor
158
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
Flexbox
None
None
091/72 x 100%-x
Centering
None
.container { } .container .item1 .item2 .item3
.container { display: flex; }
.container { display: flex; align-items: center; }
.container { display: flex; justify-content: space-between; }
.container { display: flex; } .item2 { flex: 1; }
.item2
.container { display: flex; flex-direction: row-reverse; } .item2 .item3 .item1
Browser Support
tl;dr 10+
“Old Syntax”? “Old Specification”?
Autoprefixer
.container { display: flex; align-items: center; justify-content: center; }
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;
-ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
Browser Inconsistencies
philipwalton flexbugs
Use Flexbox!