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
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
2
3k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
400
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
780
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
560
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
300
Google Opalで使える37のライブラリ
mickey_kubo
3
130
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
180
Webサーバーサイド言語としてのRustについて
kouyuume
1
4k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Optimizing for Happiness
mojombo
379
70k
For a Future-Friendly Web
brad_frost
180
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Cult of Friendly URLs
andyhume
79
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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!