Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flexbox

Matija Marohnić
July 05, 2017
Programming
0
35

 Flexbox

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Introduction to Remix
silvenon
0
120
Cypress vs. Playwright
silvenon
0
150
Studying Strapi: an open source head headless CMS
silvenon
0
33
CSS Specificity
silvenon
0
25
Make your JavaScript projects more accessible to newcomers
silvenon
0
69
React Hooks
silvenon
0
67
PostCSS
silvenon
0
41
CSS Custom Properties
silvenon
0
37
Maintainable Integration Testing in React
silvenon
0
28

Other Decks in Programming

See All in Programming
複数ドメインに散らばってしまった画像…！ 運用中のPHPアプリに後からCDNを導入する…！
suguruooki
0
450
AI時代のプログラミング教育 / programming education in ai era
kishida
23
21k
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
620
custom_lintで始めるチームルール管理
akaboshinit
0
190
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
200
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
Productivity is Messing Around and Having Fun
hollycummins
0
170
Devinのメモリ活用の学びを自社サービスにどう組み込むか？
itarutomy
0
1.9k
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
140
本当だってば！俺もTRICK 2022に入賞してたんだってば！
jinroq
0
270
プログラミング教育のコスパの話
superkinoko
0
130
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
140

Featured

See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Unsuck your backbone
ammeep
670
57k
The Cult of Friendly URLs
andyhume
78
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Gamification - CAS2011
davidbonilla
81
5.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
39
7.2k
How to Ace a Technical Interview
jacobian
276
23k

Transcript

  1. Flexbox

  2. None
  3. None

  4. 091/72 x 100%-x

  5. Centering

  6. None

  7. .container { } .container .item1 .item2 .item3

  8. .container { display: flex; }

  9. .container { display: flex; align-items: center; }

  10. .container { display: flex; justify-content: space-between; }

  11. .container { display: flex; } .item2 { flex: 1; }

    .item2

  12. .container { display: flex; flex-direction: row-reverse; } .item2 .item3 .item1

  13. Browser Support

  14. tl;dr 10+

  15. “Old Syntax”? “Old Specification”?

  16. Autoprefixer

  17. .container { display: flex; align-items: center; justify-content: center; }

  18. .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; }

  19. Browser Inconsistencies

  20. philipwalton flexbugs

  21. Use Flexbox!