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
88
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
54
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
37
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
70
CSS Specificity
Avatar for Matija Marohnić silvenon
0
80
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
110
React Hooks
Avatar for Matija Marohnić silvenon
0
110
PostCSS
Avatar for Matija Marohnić silvenon
0
76

Other Decks in Programming

See All in Programming
SODA - FACT BOOK（JP）
Avatar for SODA inc. sodainc
1
40k
Inertia Rails: The One-Person Framework with React & Friends
Avatar for Svyatoslav Kryukov skryukov
0
210
Zero-Tap Sign-In対応、結局何をすればいいの？
Avatar for mitohato14 mitohato14
0
1.4k
Materialが消えた日 〜真っ白なFlutterキャンバスにRenderObjectで絵を描く〜
Avatar for Aoi Umigishi umigishiaoi
0
140
Crash Auto Pipelines
Avatar for Veronikapj veronikapj
1
330
React Native経験者が Flutterを30⽇間触って驚いたこと
Avatar for ryota_saito 3saito
0
140
Performance Optimization With LLMs
Avatar for xLeitix xleitix
0
240
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
Avatar for Geunhyeok LEE leegeunhyeok
0
180
baseline으로 마이그레이션, 리팩토링 안전하게 맡기기
Avatar for Sungyong An fornewid
1
830
Modernizing iOS Apps
Avatar for seyfeddin seyfoyun
0
150
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
Avatar for t0yohei t0yohei
0
130
[Dev Group Paris Octobre 26] Agentforce, SIforce, Claudeforce, Slackbot… on s'y retrouve ?
Avatar for Nathan Abondance nabondance
0
130

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.6k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.3k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
560
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.5k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
600

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!