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
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.9k
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…？
maroon1st
0
100
快速入門可觀測性
blueswen
0
500
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
410
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
300
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
200
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.4k

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Designing Experiences People Love
moore
139
23k
4 Signs Your Business is Dying
shpigford
182
22k
Side Projects
sachag
452
42k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Gamification - CAS2011
davidbonilla
80
5.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
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!