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

Flexbox

Matija Marohnić
July 05, 2017
Programming
0
32

 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
30
CSS Specificity
silvenon
0
22
Make your JavaScript projects more accessible to newcomers
silvenon
0
66
React Hooks
silvenon
0
64
PostCSS
silvenon
0
38
CSS Custom Properties
silvenon
0
34
Maintainable Integration Testing in React
silvenon
0
23

Other Decks in Programming

See All in Programming
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.5k
Jakarta EE meets AI
ivargrimstad
0
540
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
480
Ça bouge du côté des animations CSS !
goetter
2
160
Jakarta EE meets AI
ivargrimstad
0
500
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
390
Drawing Heighway’s Dragon - Recursive Function Rewrite - From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
100
.NET Frameworkでも汎用ホストが使いたい！
tomokusaba
0
200

Featured

See All Featured
Bash Introduction
62gerente
611
210k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Optimizing for Happiness
mojombo
377
70k
BBQ
matthewcrist
87
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
A better future with KSS
kneath
238
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Typedesign – Prime Four
hannesfritz
41
2.5k
A designer walks into a library…
pauljervisheath
205
24k

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!