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

Flexbox

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

 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
9
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
48
CSS Specificity
Avatar for Matija Marohnić silvenon
0
39
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
76
React Hooks
Avatar for Matija Marohnić silvenon
0
83
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
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう！
Avatar for neruneruo neruneruo
4
2.4k
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
1.1k
ThorVG Viewer In VS Code
Avatar for Nor-s nors
0
670
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
Avatar for Philip Schwarz philipschwarz
PRO
0
140
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
170
大規模Cloud Native環境におけるFalcoの運用
Avatar for Chihiro Hasegawa owlinux1000
0
250
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
270
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
10
1.6k
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.4k
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
340
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
2.1k
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
220

Featured

See All Featured
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
110
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
410
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
13k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
700
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
230k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
200
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k

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!