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
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
770
42 best practices for Symfony, a decade later
tucksaun
1
180
良いユニットテストを書こう
mototakatsu
7
2.2k
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
750
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
3
370
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
2
670
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
5
1.2k
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
110
テストケースの名前はどうつけるべきか？
orgachem
PRO
0
130
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
280
From Translations to Multi Dimension Entities
alexanderschranz
2
130

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Building Your Own Lightsaber
phodgson
103
6.1k
Docker and Python
trallard
42
3.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How STYLIGHT went responsive
nonsquared
95
5.2k
Typedesign – Prime Four
hannesfritz
40
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Speed Design
sergeychernyshev
25
670
Into the Great Unknown - MozCon
thekraken
33
1.5k

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!