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

Other Decks in Programming

See All in Programming
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
Scaling your build logic
antalmonori
1
100
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
Оптимизируем производительность блока Казначейство
lamodatech
0
950
Beyond ORM
77web
11
1.6k
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
180
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.2k
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
390
ErdMap: Thinking about a map for Rails applications
makicamel
1
660
情報漏洩させないための設計
kubotak
5
1.3k
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
590
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…？
maroon1st
0
100

Featured

See All Featured
Being A Developer After 40
akosma
89
590k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
173
51k
BBQ
matthewcrist
85
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
4 Signs Your Business is Dying
shpigford
182
22k
We Have a Design System, Now What?
morganepeng
51
7.3k
Building Adaptive Systems
keathley
38
2.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!