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

Flexbox

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
59
0

 Flexbox

Avatar for Matija Marohnić

Matija Marohnić

July 05, 2017

More Decks by Matija Marohnić

See All by Matija Marohnić
oxlint & oxfmt: linting and formatting from the future
Avatar for Matija Marohnić silvenon
0
27
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
16
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
150
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
170
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
55
CSS Specificity
Avatar for Matija Marohnić silvenon
0
58
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
88
React Hooks
Avatar for Matija Marohnić silvenon
0
91
PostCSS
Avatar for Matija Marohnić silvenon
0
60

Other Decks in Programming

See All in Programming
GoogleCloudとterraform完全に理解した
Avatar for Terisuke terisuke
1
190
書き換えて学ぶTemporal #fukts
Avatar for Hiroyuki ANAI pirosikick
2
370
ふにゃっとしない名前の付け方 〜哲学で茹で上げる、コシのあるソフトウェア設計〜
Avatar for akshimo shimomura
0
110
Are We Really Coding 10× Faster with AI?
Avatar for Koichi Yoshida kohzas
0
150
KMP × Kotlin 2.3 - How Android Got Slower While iOS Builds Improved by 47%
Avatar for Ryosuke Shimizu (RIO) rio432
0
170
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
390
エラー処理の温故知新 / history of error handling technic
Avatar for nakaryo ryotanakaya
7
1.9k
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
340
アクセシビリティ試験の"その後"を仕組み化する
Avatar for yuuumin yuuumiravy
1
200
ついに来た！本格的なマルチクラウド時代の Google Cloud
Avatar for maroon1st maroon1st
0
400
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
Avatar for Atsushi Matsuo matsuo_atsushi
0
140
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
Avatar for takuro abe takuroabe
0
130

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
140
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
750
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
360
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
230
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
350
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
180
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
240
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
170

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!