$30 off During Our Annual Pro Sale. View Details »

Flexbox

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

 Flexbox

Avatar for Matija Marohnić

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
9
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
45
CSS Specificity
Avatar for Matija Marohnić silvenon
0
35
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
76
React Hooks
Avatar for Matija Marohnić silvenon
0
80
PostCSS
Avatar for Matija Marohnić silvenon
0
45
CSS Custom Properties
Avatar for Matija Marohnić silvenon
0
40

Other Decks in Programming

See All in Programming
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
120
AWS CDKの推しポイントN選
Avatar for アキキー akihisaikeda
1
240
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
9
1.1k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
テストやOSS開発に役立つSetup PHP Action
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
6
3k
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
1
300
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
Avatar for matsu_chara matsu_chara
1
220
エディターってAIで操作できるんだぜ
Avatar for kis9a kis9a
0
710
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
1
190
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
120
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
500

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.7k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.2k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.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!