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
【PHP】 破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
WebDriver BiDiとは何なのか
yotahada3
1
140
Unity Android XR入門
sakutama_11
0
140
sappoRo.R #12 初心者セッション
kosugitti
0
230
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
AHC041解説
terryu16
0
590

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Adopting Sorbet at Scale
ufuk
74
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
The Pragmatic Product Professional
lauravandoore
32
6.4k
Producing Creativity
orderedlist
PRO
343
39k
Music & Morning Musume
bryan
46
6.3k
The Language of Interfaces
destraynor
156
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.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!