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

Flexbox

Matija Marohnić
July 05, 2017
Programming
0
26

 Flexbox

Matija Marohnić

July 05, 2017
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Introduction to Remix
silvenon
0
94
Cypress vs. Playwright
silvenon
0
120
Studying Strapi: an open source head headless CMS
silvenon
0
23
CSS Specificity
silvenon
0
20
Make your JavaScript projects more accessible to newcomers
silvenon
0
47
React Hooks
silvenon
0
57
PostCSS
silvenon
0
30
CSS Custom Properties
silvenon
0
25
Maintainable Integration Testing in React
silvenon
0
15

Other Decks in Programming

See All in Programming
Polars入門
daikikatsuragawa
1
180
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.5k
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
Going beyond Apache Parquet's default settings
xhochy
0
130
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Domain-Driven Transformation
hschwentner
2
1.5k
PHPはいつから死んでいるかの調査
chiroruxx
2
420
WebGLで始める コンピュータグラフィックス入門
heller77
0
170
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
Snowflakeで眠ったデータを起こそう！
estie
0
140

Featured

See All Featured
Code Review Best Practice
trishagee
56
15k
Building an army of robots
kneath
300
41k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
RailsConf 2023
tenderlove
8
550
Optimizing for Happiness
mojombo
370
69k
Rails Girls Zürich Keynote
gr2m
91
13k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Fireside Chat
paigeccino
22
2.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k

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!