Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Flexbox

Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
0
47

 Flexbox

Avatar for Matija Marohnić

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
9
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
140
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
160
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
46
CSS Specificity
Avatar for Matija Marohnić silvenon
0
36
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
76
React Hooks
Avatar for Matija Marohnić silvenon
0
81
PostCSS
Avatar for Matija Marohnić silvenon
0
45
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
40

Other Decks in Programming

See All in Programming
チームをチームにするEM
Avatar for hitode909 hitode909
0
370
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
Avatar for maroon1st maroon1st
0
260
perlをWebAssembly上で動かすと何が嬉しいの？？？ / Where does Perl-on-Wasm actually make sense?
Avatar for mackee mackee
0
120
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
290
ゲームの物理 剛体編
Avatar for Fadis fadis
0
370
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
160
The Art of Re-Architecture - Droidcon India 2025
Avatar for Sid Patil siddroid
0
120
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
170
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
130
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
140
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
3.8k
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
310

Featured

See All Featured
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.4k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
0
1.8M
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
69
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
100
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
0
2.4k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
190

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!