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

Flexbox

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

 Flexbox

Avatar for Matija Marohnić

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
10
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
49
CSS Specificity
Avatar for Matija Marohnić silvenon
0
47
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
80
React Hooks
Avatar for Matija Marohnić silvenon
0
85
PostCSS
Avatar for Matija Marohnić silvenon
0
46
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
43

Other Decks in Programming

See All in Programming
20260228_JAWS_Beginner_Kansai
Avatar for Takuya Yonezawa takuyay0ne
3
270
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
2
2.1k
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
LangChain4jとは一味違うLangChain4j-CDI
Avatar for Kenji Kazumura kazumura
1
120
Claude Codeと2つの巻き戻し戦略 / Two Rewind Strategies with Claude Code
Avatar for 果物リン fruitriin
0
190
Agent Skills Workshop - AIへの頼み方を仕組み化する
Avatar for Gota gotalab555
12
7.1k
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
310
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
470
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
320
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
2.4k
Head of Engineeringが現場で回した生産性向上施策 2025→2026
Avatar for gessy0129 gessy0129
0
200
文字コードの話
Avatar for Masaki Hara qnighy
43
16k

Featured

See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
180
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
150
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
280
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
230
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
50k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
68
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
160

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!