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

Flexbox

Matija Marohnić
July 05, 2017
Programming
0
31

 Flexbox

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Introduction to Remix
silvenon
0
120
Cypress vs. Playwright
silvenon
0
140
Studying Strapi: an open source head headless CMS
silvenon
0
28
CSS Specificity
silvenon
0
21
Make your JavaScript projects more accessible to newcomers
silvenon
0
62
React Hooks
silvenon
0
62
PostCSS
silvenon
0
35
CSS Custom Properties
silvenon
0
32
Maintainable Integration Testing in React
silvenon
0
22

Other Decks in Programming

See All in Programming
Jakarta EE meets AI
ivargrimstad
0
560
レガシーシステムにどう立ち向かうか　複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
Ethereum_.pdf
nekomatu
0
460
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Realtime API 入門
riofujimon
0
150
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Arm移行タイムアタック
qnighy
0
330
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.9k
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Making Projects Easy
brettharned
115
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Building an army of robots
kneath
302
43k
Teambox: Starting and Learning
jrom
133
8.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Six Lessons from altMBA
skipperchong
27
3.5k
It's Worth the Effort
3n
183
27k

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!