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
67
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
Bedrock × Confluenceで簡単(?)社内RAG
Avatar for iharuoru iharuoru
1
110
Vibe Coding の話をしよう
Avatar for schroneko schroneko
14
3.7k
スモールスタートで始めるためのLambda×モノリス（Lambdalith）
Avatar for アキキー akihisaikeda
2
380
On-the-fly Suggestions of Rewriting Method Deprecations
Avatar for Masato Ohba ohbarye
3
5k
一緒に働きたくなるプログラマの思想 #QiitaConference
Avatar for mu_zaru mu_zaru
80
20k
Boost Your Performance and Developer Productivity with Jakarta EE 11
Avatar for ivargrimstad ivargrimstad
0
810
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
1
130
ComposeでのPicture in Picture
Avatar for takathemax takathemax
0
130
Serving TUIs over SSH with Go
Avatar for Carlos Alexandro Becker caarlos0
0
600
Amazon CloudWatchの地味だけど強力な機能紹介！
Avatar for Tsuyoshi Ito itotsum
0
240
Laravel × Clean Architecture
Avatar for Takayuki bumptakayuki
PRO
0
140
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
Avatar for ike ike002jp
1
110

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.7k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.2k
It's Worth the Effort
Avatar for 3n 3n
184
28k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
105
19k
Navigating Team Friction
Avatar for Lara Hogan lara
185
15k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.4k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
129
19k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.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!