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

Flexbox

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

 Flexbox

Avatar for Matija Marohnić

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
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
38
CSS Specificity
Avatar for Matija Marohnić silvenon
0
30
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
73
React Hooks
Avatar for Matija Marohnić silvenon
0
72
PostCSS
Avatar for Matija Marohnić silvenon
0
44
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
40
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
31

Other Decks in Programming

See All in Programming
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
Avatar for rockname rockname
2
1.5k
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
Avatar for ukitaka ukitaka
0
290
CSC305 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
380
スマホで海難事故は防げるか？年間2000件以上の小型船舶の事故に挑むアプリ開発
Avatar for Atsuki Seo atsuki_seo
0
120
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
Avatar for Yusaku Nishi jrsaruo
0
110
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
260
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
Avatar for yuhi yuhisatoxxx
3
750
Build your own WebP codec in Swift
Avatar for Kishikawa Katsumi kishikawakatsumi
2
830
複雑化したリポジトリをなんとかした話　pipenvからuvによるモノレポ構成への移行
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
540
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
220
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
Avatar for Yutaro Muta yutailang0119
0
210
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
Avatar for Naofumi Kagami naofumi
4
2.3k

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
610
69k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k

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!