Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Flexbox (WebElement #35)
Search
Vladimír Kriška
October 08, 2015
Programming
0
98
CSS Flexbox (WebElement #35)
Vladimír Kriška
October 08, 2015
Tweet
Share
More Decks by Vladimír Kriška
See All by Vladimír Kriška
Twelve-Factor app with Docker
ujovlado
0
40
Design a REST API you will love to work with
ujovlado
0
630
Docker for PHP developers - Tips, Tricks & Lessons learned
ujovlado
3
370
Docker ‐ from development to production in minutes (PoSobota #91)
ujovlado
0
270
Non-traditional use of Docker (Nette Camp #3)
ujovlado
0
67
Contributions [lightning talk] (PyconCZ 2015)
ujovlado
0
39
Simplify your dev life with Docker (WebElement Banská Bystrica)
ujovlado
0
83
Don't underestimate CSS (WebElement #30)
ujovlado
0
510
Database Migrations in PHP (Posobota #66)
ujovlado
0
71
Other Decks in Programming
See All in Programming
ONE WEDGE_company_guide
1wedge_one
0
470
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
370
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
150
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Hanami and htmx
bkuhlmann
0
210
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
190
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Featured
See All Featured
Music & Morning Musume
bryan
41
5.6k
Atom: Resistance is Futile
akmur
259
25k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Web Components: a chance to create the future
zenorocha
305
41k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Designing Experiences People Love
moore
136
23k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Transcript
CSS FLEXBOX Vladimír Kriška (@ujovlado) WebElement #35
None
None
Classic “floats”
None
Flexbox applied* *and minor improvements: styled button, changed image position
None
Container, items, … source: http://www.w3.org/TR/css-flexbox-1/
flex-flow (shorthand) flex-direction • row, row-reverse, column, column-reverse • initial
value: row flex-wrap • nowrap, wrap, wrap-reverse • initial value: nowrap • flex-direction || flex-wrap
order • <int> • initial value: 0 • affects only
visual media (not speech) • use it for visual, not logical ordering
Single-line & multi-line Once content is broken into lines, each
line is independent
The “flex” property (shorthand) • none, [flex-grow && flex-shrink ||
flex-basis] • flex: none • 0 0 auto • flex: initial (this is an initial value) • 0 1 auto • flex: auto • 1 1 auto • flex: <int> • <int> 1 0% (e.g. flex: 10 => flex: 10 1 0%)
flex-grow & flex-shrink & flex-basis flex-grow how much the flex
item will grow relative to the rest of the flex items flex-shrink how much the flex item will shrink relative to the rest of the flex items flex-basis initial main size of the flex item, before free space is distributed according to the flex factors
flex: 1 0 20%* *with min-width applied and disabled max-width
min-width: 200px;
Different flex for each box* min-width: 200px; *with min-width applied
and disabled max-width
None
justify-content • flex-start, flex-end, center, space-between, space-around • initial value:
flex-start source: http://www.w3.org/TR/css-flexbox-1/
justify-content: center
None
align-items, align-self align-items • flex-start, flex-end, center, baseline, stretch •
initial value: stretch • applies to: containers align-self • auto, flex-start, flex-end, center, baseline, stretch • initial value: auto • applies to: items
align-items, align-self source: http://www.w3.org/TR/css-flexbox-1/
So, how to center div vertically?
None
Questions? No? Thank you!