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
30
CSS Specificity
silvenon
0
22
Make your JavaScript projects more accessible to newcomers
silvenon
0
66
React Hooks
silvenon
0
63
PostCSS
silvenon
0
37
CSS Custom Properties
silvenon
0
34
Maintainable Integration Testing in React
silvenon
0
23

Other Decks in Programming

See All in Programming
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
最近のVS Codeで気になるニュース 2025/01
74th
1
250
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Open source software: how to live long and go far
gaelvaroquaux
0
620
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180

Featured

See All Featured
Writing Fast Ruby
sferik
628
61k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Language of Interfaces
destraynor
156
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
GitHub's CSS Performance
jonrohan
1030
460k
Practical Orchestrator
shlominoach
186
10k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building Your Own Lightsaber
phodgson
104
6.2k

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!