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
100
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
50
Design a REST API you will love to work with
ujovlado
0
660
Docker for PHP developers - Tips, Tricks & Lessons learned
ujovlado
3
400
Docker ‐ from development to production in minutes (PoSobota #91)
ujovlado
0
290
Non-traditional use of Docker (Nette Camp #3)
ujovlado
0
71
Contributions [lightning talk] (PyconCZ 2015)
ujovlado
0
42
Simplify your dev life with Docker (WebElement Banská Bystrica)
ujovlado
0
97
Don't underestimate CSS (WebElement #30)
ujovlado
0
520
Database Migrations in PHP (Posobota #66)
ujovlado
0
80
Other Decks in Programming
See All in Programming
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Introduction to GitOps
hwchiu
0
110
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
20240706_CDKConf
takuyay0ne
0
1.2k
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
CSC307 Lecture 14
javiergs
PRO
0
220
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
CSC307 Lecture 05
javiergs
PRO
0
210
Advanced App Shrinking Techniques
cbeyls
2
150
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
46
7k
What the flash - Photography Introduction
edds
65
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Writing Fast Ruby
sferik
623
60k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Fireside Chat
paigeccino
25
2.8k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
The Invisible Side of Design
smashingmag
294
50k
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!