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

Flexbox

Matija Marohnić
July 05, 2017
Programming
0
31

 Flexbox

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Introduction to Remix
silvenon
0
120
Cypress vs. Playwright
silvenon
0
140
Studying Strapi: an open source head headless CMS
silvenon
0
28
CSS Specificity
silvenon
0
21
Make your JavaScript projects more accessible to newcomers
silvenon
0
63
React Hooks
silvenon
0
62
PostCSS
silvenon
0
35
CSS Custom Properties
silvenon
0
34
Maintainable Integration Testing in React
silvenon
0
22

Other Decks in Programming

See All in Programming
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
330
nekko cloudにおけるProxmox VE利用事例
irumaru
3
420
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
3
1.1k
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
140
命名をリントする
chiroruxx
1
390
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
720
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
890
これでLambdaが不要に？！Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k
テストケースの名前はどうつけるべきか？
orgachem
PRO
0
130
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
180

Featured

See All Featured
Thoughts on Productivity
jonyablonski
67
4.4k
The Cult of Friendly URLs
andyhume
78
6.1k
BBQ
matthewcrist
85
9.4k
Typedesign – Prime Four
hannesfritz
40
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Designing for humans not robots
tammielis
250
25k
Scaling GitHub
holman
458
140k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k

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!