Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Flexbox

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

 Flexbox

Avatar for Matija Marohnić

Matija Marohnić

July 05, 2017

More Decks by Matija Marohnić

See All by Matija Marohnić
oxlint & oxfmt: linting and formatting from the future
Avatar for Matija Marohnić silvenon
0
41
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
32
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
170
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
190
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
63
CSS Specificity
Avatar for Matija Marohnić silvenon
0
72
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
99
React Hooks
Avatar for Matija Marohnić silvenon
0
100
PostCSS
Avatar for Matija Marohnić silvenon
0
67

Other Decks in Programming

See All in Programming
手動確認はもう限界 〜XCUITestでCustom URL Schemeの遷移を起動種別ごとに自動テストする〜 / Testing Custom URL Schemes with XCUITest
Avatar for otouto otouto
0
300
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
4
2.5k
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
280
iOSDC2026登壇資料.pdf
Avatar for RioFujimon riofujimon
0
170
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
280
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2k
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
Avatar for Sota Takaki stkk
0
130
スマート反転とウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
0
210
Heart of Swift Concurrency
Avatar for Yuta Koshizawa koher
0
890
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
120
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
160
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
1
590

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
320
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
360
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
450
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
500
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
510
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
300

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!