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
160
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
120
Design a REST API you will love to work with
ujovlado
0
750
Docker for PHP developers - Tips, Tricks & Lessons learned
ujovlado
3
480
Docker ‐ from development to production in minutes (PoSobota #91)
ujovlado
0
380
Non-traditional use of Docker (Nette Camp #3)
ujovlado
0
140
Contributions [lightning talk] (PyconCZ 2015)
ujovlado
0
93
Simplify your dev life with Docker (WebElement Banská Bystrica)
ujovlado
0
170
Don't underestimate CSS (WebElement #30)
ujovlado
0
590
Database Migrations in PHP (Posobota #66)
ujovlado
0
130
Other Decks in Programming
See All in Programming
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
Reading Rails 1.0 Source Code
okuramasafumi
0
250
AIコーディングAgentとの向き合い方
eycjur
0
280
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Featured
See All Featured
Making Projects Easy
brettharned
117
6.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Building Adaptive Systems
keathley
43
2.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Cult of Friendly URLs
andyhume
79
6.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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!