Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Flexbox

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
88
0

 Flexbox

Avatar for Matija Marohnić

Matija Marohnić

July 05, 2017

More Decks by Matija Marohnić

See All by Matija Marohnić
oxlint & oxfmt: linting and formatting from the future
Avatar for Matija Marohnić silvenon
0
54
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
37
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
180
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
190
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
70
CSS Specificity
Avatar for Matija Marohnić silvenon
0
80
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
110
React Hooks
Avatar for Matija Marohnić silvenon
0
110
PostCSS
Avatar for Matija Marohnić silvenon
0
76

Other Decks in Programming

See All in Programming
Getting Started with Vibe Coding
Avatar for Michael Cheng miccheng
0
170
HTML-in-Canvasで作る未来のWeb UI表現
Avatar for IKEDA Yasunobu clockmaker
5
6.2k
SODA - FACT BOOK（JP）
Avatar for SODA inc. sodainc
1
40k
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
1
770
Vue.jsで作る空間解析アプリとCapacitorプラグインのData Bridge
Avatar for Hal hal_spidernight
1
160
8年前のNode.jsを動かして分かった、npm installの裏側
Avatar for Keisuke Ikeda keisukeikeda
0
120
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
Avatar for Geunhyeok LEE leegeunhyeok
0
180
AI駆動開発4年目の現在地（『あなたはFDEになるべきか？』イベント資料）
Avatar for 熊井悠 kumaiu
0
120
Lambda durable functionsでHuman in the Loopを楽に…楽に……
Avatar for Har1101 har1101
2
250
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
Avatar for t0yohei t0yohei
0
130
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
5k
複数ドメインを一つのアプリに統合するFlutterの設計と運用_FlutterKaigi2026登壇資料（須永高弘）
Avatar for 須永高弘 takahirosunaga
0
140

Featured

See All Featured
Design in an AI World
Avatar for tapps tapps
1
380
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
540
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
350
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
760
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
330
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
610
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.4k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k

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!