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
760
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
95
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
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
770
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
460
開発生産性を上げるための生成AI活用術
starfish719
1
200
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
790
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
u503
1
100
Model Pollution
hschwentner
1
190
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
610
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
650
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.1k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
190
CSC509 Lecture 06
javiergs
PRO
0
250
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
640
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Become a Pro
speakerdeck
PRO
29
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Balancing Empowerment & Direction
lara
4
680
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Cult of Friendly URLs
andyhume
79
6.6k
How to train your dragon (web standard)
notwaldorf
96
6.3k
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!