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

Flexbox

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

 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
44
CSS Specificity
Avatar for Matija Marohnić silvenon
0
33
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
76
React Hooks
Avatar for Matija Marohnić silvenon
0
79
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
Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025
Avatar for Marco Roth marcoroth
0
240
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
Avatar for HideyukiKitao panda728
PRO
2
2k
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
350
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
Avatar for sg4k0 sg4k0
0
360
開発に寄りそう自動テストの実現
Avatar for Hiroki Iseri goyoki
1
370
配送計画の均等化機能を提供する取り組みについて(⽩⾦鉱業 Meetup Vol.21@六本⽊（数理最適化編))
Avatar for 伊豆原基人 izu_nori
0
120
なあ兄弟、 余白の意味を考えてから UI実装してくれ！
Avatar for Ryomm ktcryomm
10
11k
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
190
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
Avatar for Shoma Okamoto shmokmt
5
2.1k
AIコーディングエージェント（skywork）
Avatar for kondai kondai24
0
110
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
Avatar for Kazuki Hara harappa80
0
260
スタートアップを支える技術戦略と組織づくり
Avatar for pospome pospome
8
15k

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
69k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.6k

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!