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
HTTPじゃ遅すぎる！ SwitchBotを自作ハブで動かして学ぶBLE通信
Avatar for Shoichi Ochi occhi
0
230
Researchlyの開発で参考にしたデザイン
Avatar for arakawa adsholoko
0
120
CSC305 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
190
SidekiqでAIに商品説明を生成させてみた
Avatar for Aki Nakahara akinko_0915
0
130
What’s Fair is FAIR: A Decentralised Future for WordPress Distribution
Avatar for Ryan McCue rmccue
0
150
Dive into Triton Internals
Avatar for Liam Jongsu Kim appleparan
0
480
Tangible Code
Avatar for chobishiba chobishiba
3
520
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
0
580
なんでRustの環境構築してないのにRust製のツールが動くの？ / Why Do Rust-Based Tools Run Without a Rust Environment?
Avatar for TOMIKAWA Sotaro ssssota
15
48k
CSC509 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
flutter_kaigi_2025.pdf
Avatar for Kyohei Ito kyoheig3
1
190

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
4.9k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
310
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
1.8k

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!