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
170
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
490
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
97
Simplify your dev life with Docker (WebElement Banská Bystrica)
ujovlado
0
170
Don't underestimate CSS (WebElement #30)
ujovlado
0
600
Database Migrations in PHP (Posobota #66)
ujovlado
0
130
Other Decks in Programming
See All in Programming
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.8k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
Devoxx BE - Local Development in the AI Era
kdubois
0
140
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
330
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.5k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
830
品質ワークショップをやってみた
nealle
0
630
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
900
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
CSC509 Lecture 07
javiergs
PRO
0
240
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.5k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
Code Reviewing Like a Champion
maltzj
526
40k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
Building Flexible Design Systems
yeseniaperezcruz
329
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Raft: Consensus for Rubyists
vanstee
140
7.2k
How GitHub (no longer) Works
holman
315
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Bash Introduction
62gerente
615
210k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
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!