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

Flexbox

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
53
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
22
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
12
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
53
CSS Specificity
Avatar for Matija Marohnić silvenon
0
51
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
85
React Hooks
Avatar for Matija Marohnić silvenon
0
89
PostCSS
Avatar for Matija Marohnić silvenon
0
52

Other Decks in Programming

See All in Programming
Kubernetesでセルフホストが簡単なNewSQLを求めて / Seeking a NewSQL Database That's Simple to Self-Host on Kubernetes
Avatar for nnaka2992 nnaka2992
0
200
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
Avatar for shogogg shogogg
2
790
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
7
1.2k
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
130
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
Avatar for hideki kinjyo o0h
PRO
0
190
AIと共にエンジニアとPMの “二刀流”を実現する
Avatar for Naruo Yoshiki naruogram
0
130
ファインチューニングせずメインコンペを解く方法
Avatar for pokutuna pokutuna
0
260
PHP でエミュレータを自作して Ubuntu を動かそう
Avatar for memory m3m0r7
PRO
2
170
Rethinking API Platform Filters
Avatar for Vincent Amstoutz vinceamstoutz
0
7.9k
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
Avatar for panda_program panda_program
0
230
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
Avatar for nero15 takuya_houshima
0
700
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
820

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
4
520
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
890
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
230
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
330
Designing for Performance
Avatar for Lara Hogan lara
611
70k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
110k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
110
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
200

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!