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

Flexbox

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

 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
130
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
150
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
33
CSS Specificity
Avatar for Matija Marohnić silvenon
0
28
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
72
React Hooks
Avatar for Matija Marohnić silvenon
0
71
PostCSS
Avatar for Matija Marohnić silvenon
0
42
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
39
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
29

Other Decks in Programming

See All in Programming
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
Avatar for Kenichi SUZUKI knih
11
2k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
Avatar for どすこい daisuketakeda
1
130
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
100
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
310
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
Avatar for アキキー akihisaikeda
3
310
Julia という言語について （FP in Julia « SIDE: F »） for 関数型まつり2025
Avatar for GOTOH Shunsuke antimon2
3
980
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
190
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
390
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
800
ReadMoreTextView
Avatar for Sungyong An fornewid
1
480
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
510
GoのGenericsによるslice操作との付き合い方
Avatar for syumai syumai
3
690

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
17
940
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k

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!