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

Flexbox

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Matija Marohnić Matija Marohnić
July 05, 2017
Programming
73
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
31
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
24
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
160
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
170
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
57
CSS Specificity
Avatar for Matija Marohnić silvenon
0
64
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
93
React Hooks
Avatar for Matija Marohnić silvenon
0
95
PostCSS
Avatar for Matija Marohnić silvenon
0
66

Other Decks in Programming

See All in Programming
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
Avatar for ta-hasunuma thasu0123
0
130
ローカルLLMでどこまでコードが書けるか -縮小版 /　How much code can be written on a local LLM Shortened
Avatar for Naoki Kishida kishida
2
190
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
130
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
390
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
200
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
2
550
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
Avatar for Yusuke Wada yusukebe
7
1.9k
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
Avatar for 武田 憲太郎 kentaroutakeda
3
460
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
340
act2-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
110
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
2.8k
Foundation Models frameworkで画像分析
Avatar for リョウ ryodeveloper
1
120

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.3k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
170
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
450
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
860

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!