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
43
Flexbox
Matija Marohnić
July 05, 2017
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
140
Cypress vs. Playwright
silvenon
0
160
Studying Strapi: an open source head headless CMS
silvenon
0
38
CSS Specificity
silvenon
0
30
Make your JavaScript projects more accessible to newcomers
silvenon
0
75
React Hooks
silvenon
0
72
PostCSS
silvenon
0
44
CSS Custom Properties
silvenon
0
40
Maintainable Integration Testing in React
silvenon
0
31
Other Decks in Programming
See All in Programming
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
860
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
7
15k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.6k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
320
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
100
Go言語はstack overflowの夢を見るか?
logica0419
0
520
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
180
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
360
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
150
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
Google Opalで使える37のライブラリ
mickey_kubo
3
130
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Producing Creativity
orderedlist
PRO
347
40k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Side Projects
sachag
455
43k
A Modern Web Designer's Workflow
chriscoyier
697
190k
How to Ace a Technical Interview
jacobian
280
24k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
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!