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

Flexbox

Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
60
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
28
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
17
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
55
CSS Specificity
Avatar for Matija Marohnić silvenon
0
59
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
89
React Hooks
Avatar for Matija Marohnić silvenon
0
91
PostCSS
Avatar for Matija Marohnić silvenon
0
61

Other Decks in Programming

See All in Programming
リセットCSSを1行消したらアクセシビリティが向上した話
Avatar for pvcresin pvcresin
4
520
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
1
140
20260514_its_the_context_window_stupid.pdf
Avatar for heita heita
0
1k
属人化しないコード品質の作り方_2026.04.07.pdf
Avatar for Masaki Murano muraaano
1
360
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
0
140
開発とはなにか、Essenceカーネルで見えるもの
Avatar for ukin0k0 ukin0k0
0
170
SkillsをS3 Filesに置く時のあれこれ
Avatar for watany watany
3
1.6k
Spec Driven Development | AI Summit Vilnius
Avatar for Daniel Sogl danielsogl
PRO
1
160
Firefoxにコントリビューションして得られた学び
Avatar for ken7253 ken7253
2
160
空間オーディオの活用
Avatar for Yuki Yasoshima objectiveaudio
0
150
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
Avatar for takuro abe takuroabe
0
180
Are We Really Coding 10× Faster with AI?
Avatar for Koichi Yoshida kohzas
0
180

Featured

See All Featured
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.4k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
230
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
120
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
310
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
370
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
270
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k

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!