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
27
Flexbox
Matija Marohnić
July 05, 2017
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
94
Cypress vs. Playwright
silvenon
0
120
Studying Strapi: an open source head headless CMS
silvenon
0
23
CSS Specificity
silvenon
0
20
Make your JavaScript projects more accessible to newcomers
silvenon
0
47
React Hooks
silvenon
0
57
PostCSS
silvenon
0
30
CSS Custom Properties
silvenon
0
25
Maintainable Integration Testing in React
silvenon
0
15
Other Decks in Programming
See All in Programming
Long journey of Ruby standard library RubyKaigi 2024
andpad
2
190
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
110
酒飲んでたらテックリードになった話
spbaya0141
0
210
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
550
Open standards for building event-driven applications in the cloud
meteatamel
0
230
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
160
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
5
320
JavaScript Closure
asoluka
0
2k
Criando a Woovi em uma semana
daniloab
0
120
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2.1k
Next.js App Router
quramy
14
2.3k
Productivity is Messing Around and Having Fun
hollycummins
1
170
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Facilitating Awesome Meetings
lara
43
5.6k
Optimizing for Happiness
mojombo
370
69k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Robots, Beer and Maslow
schacon
PRO
155
8k
What the flash - Photography Introduction
edds
64
11k
Being A Developer After 40
akosma
67
580k
Web development in the modern age
philhawksworth
203
10k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Why Our Code Smells
bkeepers
PRO
331
56k
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!