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

Flexbox

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

 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
140
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
160
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
38
CSS Specificity
Avatar for Matija Marohnić silvenon
0
30
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
73
React Hooks
Avatar for Matija Marohnić silvenon
0
72
PostCSS
Avatar for Matija Marohnić silvenon
0
43
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
40
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
31

Other Decks in Programming

See All in Programming
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
370
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
Avatar for Nealle nealle
0
400
MLH State of the League: 2026 Season
Avatar for Swift theycallmeswift
0
210
サーバーサイドのビルド時間87倍高速化
Avatar for PLAID Tech plaidtech
PRO
0
690
ソフトウェアテスト徹底指南書の紹介
Avatar for Hiroki Iseri goyoki
1
130
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
Avatar for Marco Roth marcoroth
0
300
Trem on Rails - Prompt Engineering com Ruby
Avatar for Elaine Naomi elainenaomi
1
100
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
Avatar for Takumi Abe east_takumi
0
370
Google I/O recap web編 大分Web祭り2025
Avatar for kponda kponda
0
2.9k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
Avatar for tk1351 tk1351
4
1.6k
rage against annotate_predecessor
Avatar for Junichi Kobayashi junk0612
0
160
AI時代のUIはどこへ行く？
Avatar for Yusuke Wada yusukebe
11
5.7k

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
56
5.8k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
610
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
It's Worth the Effort
Avatar for 3n 3n
187
28k

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!