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
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
Avatar for Tomohiko Morita deka_morita
0
160
プログラマのための作曲入門
Avatar for CHEEBOW cheebow
0
500
CSS Linter の現在地 2025年のベストプラクティスを探る
Avatar for mattsuu ryo_manba
10
3.1k
Back to the Future: Let me tell you about the ACP protocol
Avatar for Benedikt Terhechte terhechte
0
120
議事録の要点整理を自動化！ サーバレス Bot 構築術
Avatar for ikechi penpeen
3
1.6k
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
Avatar for Yutaro Muta yutailang0119
0
210
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
Avatar for kinocoboy kinocoboy2
4
640
PostgreSQLで手軽にDuckDBを使う！DuckDB&pg_duckdb入門/osk2025-duckdb
Avatar for Takahashi Ikki takahashiikki
1
230
非同期jobをtransaction内で 呼ぶなよ！絶対に呼ぶなよ！
Avatar for Yuto Urushima alstrocrack
0
290
Repenser les filtres API Platform: une nouvelle syntaxe
Avatar for Vincent Amstoutz vinceamstoutz
2
150
CSC509 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
430
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
Avatar for Takeru Hayasaka takehaya
7
1.4k

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
3
140
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
25k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
56
6.6k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
660
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k

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!