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

Flexbox

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

 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
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
260
Goで作る、開発・CI環境
Avatar for Shinpei Mine sin392
0
260
CDK引数設計道場100本ノック
Avatar for kazuho cryer-shinozuka badmintoncryer
2
450
リバースエンジニアリング新時代へ！
GhidraとClaude DesktopをMCPで繋ぐ/findy202507
Avatar for @tkmru tkmru
3
770
状態遷移図を書こう / Sequence Chart vs State Diagram
Avatar for Kuniwak orgachem
PRO
2
200
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
Avatar for Nealle nealle
2
12k
AI コーディングエージェントの時代へ：JetBrains が描く開発の未来
Avatar for Masaru Horioka masaruhr
1
200
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
930
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
170
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
Avatar for ivargrimstad ivargrimstad
0
230
脱Riverpod？fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
Avatar for Takuma Osada ostk0069
0
480
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
260

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.2k
Scaling GitHub
Avatar for Zach Holman holman
460
140k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k

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!