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
85
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
49
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
35
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
180
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
190
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
67
CSS Specificity
Avatar for Matija Marohnić silvenon
0
75
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
100
React Hooks
Avatar for Matija Marohnić silvenon
0
100
PostCSS
Avatar for Matija Marohnić silvenon
0
72

Other Decks in Programming

See All in Programming
[2026-09-26]空論ジェネリックプロセス～テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話～
Avatar for tosite tosite
0
270
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
450
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
280
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
720
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
380
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
0
190
難しいけど、読めた。- OSSの入口に立った話。
Avatar for shota sts11142
0
150
mrbgem 三角測量 開発
Avatar for ogom ogom
0
240
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
0
190
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
140
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
190
Androidだけじゃない、DroidKaigiで広がった私の技術スタック
Avatar for Akio Itaya akkeylab
0
120

Featured

See All Featured
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
560
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
53
4k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
380
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
142
7.7k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
470

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!