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
74
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
41
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
32
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
170
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
190
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
63
CSS Specificity
Avatar for Matija Marohnić silvenon
0
72
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
99
React Hooks
Avatar for Matija Marohnić silvenon
0
100
PostCSS
Avatar for Matija Marohnić silvenon
0
67

Other Decks in Programming

See All in Programming
AHC070解法紹介
Avatar for eijirou eijirou
0
120
GraphRAGのKnowledge Graphを 直接！見る/View-GraphRAG's-KnowledgeGraph-directly!
Avatar for tyumugiko tyumugi1113
1
340
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
5
3.3k
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
Avatar for rockname rockname
0
120
iOSDC2026登壇資料.pdf
Avatar for RioFujimon riofujimon
0
170
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
440
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
210
手動確認はもう限界 〜XCUITestでCustom URL Schemeの遷移を起動種別ごとに自動テストする〜 / Testing Custom URL Schemes with XCUITest
Avatar for otouto otouto
0
300
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
Avatar for にー兄さん drumath2237
1
130
App Intentsのビルドプロセスを支える技術
Avatar for kntk kntkymt
0
390
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
250
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
150

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Done Done
Avatar for chrislema chrislema
186
16k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
380
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
260
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
530
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
340
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.6k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
580
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
360
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
320
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
910
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380

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!