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

Flexbox

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
58
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
87
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
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
320
実用！Hono RPC2026
Avatar for yodaka yodaka
2
300
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
310
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
340
Programming with a DJ Controller — not vibe coding
Avatar for seki at druby.org m_seki
3
790
Agentic Elixir
Avatar for Andrea Leopardi whatyouhide
0
440
[RubyKaigi 2026] Require Hooks
Avatar for Vladimir Dementyev palkan
1
300
Explore CoroutineScope
Avatar for tomoEng11 tomoeng11
0
170
AI時代のエンジニアリングの原則 / Engineering Principles in the AI ​​Era
Avatar for haru860 haru860
0
1.1k
空間オーディオの活用
Avatar for Yuki Yasoshima objectiveaudio
0
140
AIを導入する前にやるべきこと
Avatar for Negima negima
2
340
Spec Driven Development | AI Summit Vilnius
Avatar for Daniel Sogl danielsogl
PRO
1
140

Featured

See All Featured
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
440
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
230
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
140
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
380
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.7k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
170
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
910
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
6
35k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
770
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.9k

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!