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

Flexbox

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

 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
130
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
150
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
35
CSS Specificity
Avatar for Matija Marohnić silvenon
0
28
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
72
React Hooks
Avatar for Matija Marohnić silvenon
0
71
PostCSS
Avatar for Matija Marohnić silvenon
0
42
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
39
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
30

Other Decks in Programming

See All in Programming
AIコーディングエージェント全社導入とセキュリティ対策
Avatar for hikae hikaruegashira
16
9.5k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
Avatar for matsukada licux
8
580
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
Avatar for uzulla uzulla
1
330
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）The Basics of Agent Development with ADK — A Demo-Focused Introduction
Avatar for RisaTube risatube
PRO
6
1.4k
新世界の理解
Avatar for Akihito Koriyama koriym
0
130
Strands Agents で実現する名刺解析アーキテクチャ
Avatar for omiya omiya0555
1
110
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
Avatar for yoshi takumiyoshikawa
2
270
#QiitaBash TDDで(自分の)開発がどう変わったか
Avatar for Tommy(sigma) ryosukedtomita
1
350
Vibe coding コードレビュー
Avatar for kinopee kinopeee
0
420
PHPUnitの限界をPlaywrightで補完するテストアプローチ
Avatar for yuzneri yuzneri
0
390
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
6
1.1k
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
1
680

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
19k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k

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!