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
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
Outline View in SwiftUI
1024jp
1
330
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
100
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
890
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Jakarta EE meets AI
ivargrimstad
0
600
初めてDefinitelyTypedにPRを出した話
syumai
0
400
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
Ethereum_.pdf
nekomatu
0
460

Featured

See All Featured
Visualization
eitanlees
145
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
How STYLIGHT went responsive
nonsquared
95
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Raft: Consensus for Rubyists
vanstee
136
6.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
How to Ace a Technical Interview
jacobian
276
23k
For a Future-Friendly Web
brad_frost
175
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370

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!