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

Flexbox

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

 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
7
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
140
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
160
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
41
CSS Specificity
Avatar for Matija Marohnić silvenon
0
32
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
76
React Hooks
Avatar for Matija Marohnić silvenon
0
76
PostCSS
Avatar for Matija Marohnić silvenon
0
45
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
40

Other Decks in Programming

See All in Programming
AIのバカさ加減に怒る前にやっておくこと
Avatar for k2moons blueeventhorizon
0
160
Kotlin 2.2が切り拓く: コンテキストパラメータで書く関数型DSLと新しい依存管理のかたち
Avatar for Kenichi SUZUKI knih
0
400
Dive into Triton Internals
Avatar for Liam Jongsu Kim appleparan
0
480
AI駆動開発カンファレンスAutumn2025 _AI駆動開発にはAI駆動品質保証
Avatar for Autify autifyhq
0
150
AIエージェントでのJava開発がはかどるMCPをAIを使って開発してみた / java mcp for jjug
Avatar for Naoki Kishida kishida
3
310
Making Angular Apps Smarter with Generative AI: Local and Offline-capable
Avatar for Christian Liebel christianliebel
PRO
0
110
r2-image-worker
Avatar for Yusuke Wada yusukebe
1
160
Researchlyの開発で参考にしたデザイン
Avatar for arakawa adsholoko
0
120
KoogではじめるAIエージェント開発
Avatar for hiro hiroaki404
1
430
詳細の決定を遅らせつつ実装を早くする
Avatar for shimabox shimabox
1
990
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
Avatar for aose aoseyuu
3
5.9k
HTTPじゃ遅すぎる！ SwitchBotを自作ハブで動かして学ぶBLE通信
Avatar for Shoichi Ochi occhi
0
230

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.1k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k

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!