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
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
340
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
290
TypeScriptでDXを上げろ! Hono編
yusukebe
3
740
Deep Dive into ~/.claude/projects
hiragram
14
13k
Model Pollution
hschwentner
1
160
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
310
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Bash Introduction
62gerente
613
210k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Designing for Performance
lara
610
69k
A Tale of Four Properties
chriscoyier
160
23k
GitHub's CSS Performance
jonrohan
1031
460k
KATA
mclloyd
30
14k
Agile that works and the tools we love
rasmusluckow
329
21k
Optimizing for Happiness
mojombo
379
70k
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!