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

Flexbox

Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
0
37

 Flexbox

Avatar for Matija Marohnić

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
130
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
150
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
33
CSS Specificity
Avatar for Matija Marohnić silvenon
0
25
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
69
React Hooks
Avatar for Matija Marohnić silvenon
0
68
PostCSS
Avatar for Matija Marohnić silvenon
0
41
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
37
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
28

Other Decks in Programming

See All in Programming
バリデーションライブラリ徹底比較
Avatar for Yuta Tanaka nayuta999999
1
430
Language Server と喋ろう – TSKaigi 2025
Avatar for pizzacat83 pizzacat83
2
670
REST API設計の実践 – ベストプラクティスとその落とし穴
Avatar for 武田 憲太郎 kentaroutakeda
2
320
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
Avatar for Yui Sakamoto yuisakamoto
6
950
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
Avatar for Mufrid Krilic mufrid
0
370
iOSアプリ開発もLLMで自動運転する
Avatar for Yuya Hirayama hiragram
6
2.1k
TSConfigからTypeScriptの世界を覗く
Avatar for らいと planck16
2
1.3k
Devinで実践する！AIエージェントと協働する開発組織の作り方
Avatar for Masahiro Nishimi masahiro_nishimi
6
2.5k
JSAI2025 RecSysChallenge2024 優勝報告
Avatar for kami unonao
1
380
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
Avatar for shiro seike seike460
PRO
0
160
ワンバイナリWebサービスのススメ
Avatar for mackee mackee
10
7.5k
Doma で目指す ORM 最適解
Avatar for Toshihiro Nakamura nakamura_to
1
160

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
40
7.3k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k

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!