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

Flexbox

Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
53
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
22
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
12
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
53
CSS Specificity
Avatar for Matija Marohnić silvenon
0
51
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
85
React Hooks
Avatar for Matija Marohnić silvenon
0
89
PostCSS
Avatar for Matija Marohnić silvenon
0
52

Other Decks in Programming

See All in Programming
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
700
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
Avatar for 武田 憲太郎 kentaroutakeda
5
2.4k
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
140
PHP でエミュレータを自作して Ubuntu を動かそう
Avatar for memory m3m0r7
PRO
2
170
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
820
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.9k
AI-DLC 入門 〜AIコーディングの本質は「コード」ではなく「構造」〜 / Introduction to AI-DLC: The Essence of AI Coding Is Not “Code” but “Structure”
Avatar for shiro seike seike460
PRO
0
220
Kubernetesでセルフホストが簡単なNewSQLを求めて / Seeking a NewSQL Database That's Simple to Self-Host on Kubernetes
Avatar for nnaka2992 nnaka2992
0
200
アーキテクチャモダナイゼーションとは何か
Avatar for nwiizo nwiizo
14
3k
Go_College_最終発表資料__外部公開用_.pdf
Avatar for xe-pc23 xe_pc23
0
120
The free-lunch guide to idea circularity
Avatar for Holly Cummins hollycummins
0
410
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
160

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
720
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
92
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
95
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
140
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k

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!