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

Flexbox

Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
73
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
31
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
24
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
160
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
170
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
57
CSS Specificity
Avatar for Matija Marohnić silvenon
0
64
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
93
React Hooks
Avatar for Matija Marohnić silvenon
0
95
PostCSS
Avatar for Matija Marohnić silvenon
0
66

Other Decks in Programming

See All in Programming
才能？センス？知らん、 続けたもん勝ちだ。-- 結婚・出産・癌を越えてなお、私がプロダクトを創り続ける理由
Avatar for 16bit_idol 16bitidol
2
860
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
Avatar for YuppeEng yuppeeng
0
100
LLMによるContent Moderationの本番運用の裏側と品質担保への挑戦
Avatar for suikabar suikabar
3
860
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
2
680
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
Avatar for ta-hasunuma thasu0123
0
130
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
1.2k
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
14
7.5k
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
330
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会＠東京 (2026-06-24)
Avatar for Suguru Oki / スー suguruooki
2
150
ルールを書いて終わらせないハーネスエンジニアリング
Avatar for Yuji Yamaguchi yug1224
3
1.5k
PHP Application における Kubernetes 内 gRPC 通信
Avatar for Shin Ohno ganchiku
0
490
OSINT for SRE: 
学術論文とポストモーテムから探る
システム障害の共通パターン / SRE NEXT 2026
Avatar for Tomoyuki KOYAMA tomoyk
1
3.8k

Featured

See All Featured
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.3k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
340
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
300
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
530
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
360
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
370
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k

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!