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

Flexbox

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

 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
48
CSS Specificity
Avatar for Matija Marohnić silvenon
0
46
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
78
React Hooks
Avatar for Matija Marohnić silvenon
0
84
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
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
6k
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
760
Oxlint JS plugins
Avatar for kazupon kazupon
1
800
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
170
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
210
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.5k
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
250
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
700
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550

Featured

See All Featured
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
360
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
0
270
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
170
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
100
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
680

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!