CodeSchool CrackingTheCaseWithFlexbox

Level 1 Section 1
Foreshadowing Flexbox
A Display Type Created for Common Patterns
CSS Flexible Box Layout Module Level 1
Flexbox is a collection of CSS properties used to align content and distribute space.
Two new display values
11 new properties
http://go.codeschool.com/exbox-spec
http://go.codeschool.com/caniuse-exbox
UI Patterns in Flexbox
Equal heights
Vertically centered content
Media objects
Sticky footers
Column layouts
Flexbox Is a New Display Type
Flexbox adds ex containers, ex items, and ex lines in addition to new properties.
Block layout
Learn a
Table layout bout ot
and co h er layo
re HTM uts
Inline layout these c L and CS
ourses. S in
Positioning layout
Flex layout
Flex containers
Flex items
Flex lines
Default Behaviors of Elements
index.html HTML site.css CSS
<article class="setup">This ... article {

<img height="150" height="150" ...> border: 1px solid #d1eda6; }
<p>...</p>
</article>
display: inline
display: block
display: block
Overriding Default Behaviors

<img height="150" height="150" ...> border: 1px solid #d1eda6;
<p>...</p> display: inline; }
</article>
Collapsed
Flex Containers Control Layout of Child Items

<p>...</p> display: flex; }
</article>
Flex container
Aligned horizontally
display: ex Creates a Block-level Container

<p>...</p> display: flex; }
</article>
Uses all available width

display: inline-ex Creates an Inline Container

<p>...</p> display: inline-flex; }
</article>
Container adjusts to
width of the content
Flex Items Are Distributed Along Flex Lines
Flex items are direct children of a ex container and can be HTML elements or text.

This pipe was found outside... display: flex; }
</article>
No HTML element just text
Two ex items ll the available space of a horizontal ex line

Flex Item Spacing
A spacing algorithm is used to distribute space of all ex items across a single ex line.

<h3>...</h3> display: flex; }
<p>...</p>
</article>
Three ex items
Grouping Elements Into Flex Items
Grandchild elements do not become ex items.

<div> display: flex; }
<h3>...</h3>
<p>...</p>
</div>
</article>
Two ex items
Two ex items
Level 1 Section 2
Foreshadowing Flexbox
Wily Wrapping
Flexbox Wrapping and Direction Examples
Displaying ex items across multiple lines
Changing the direction of ex lines
Distributing space vertically

Problem: Wanting Flex Items to Stack
index.html HTML
<article class="clue">
<img height="150" height="150" ...>
<div>
<h3>...</h3>
<p>...</p>
<h3>...</h3>
<p>...</p>
</div>
</article>
These could go below the image
320px wide
Solution: ex-wrap
This propertys default value is nowrap and it accepts: nowrap | wrap | wrap-reverse.
<article class="clue">...</article> .clue {

border: 1px solid #d1eda6;
display: flex;
flex-wrap: wrap; }
The div cant t here, so it wraps
320px wide
Put It in Reverse?
The rst of the exbox properties that allows for rendering items in reverse.
<article class="clue">...</article> .clue {

border: 1px solid #d1eda6;
display: flex;
flex-wrap: wrap-reverse; }
The ex items reverse in order

Problem: Wanting Flex Items to Always Stack
index.html HTML
<main>
<img ...>
<h1>...</h1>
<p>...</p>
<a>...</a>
</main>
site.css CSS 667px wide 320px wide
main {
display: flex;
flex-wrap: wrap; }
Solution: ex-direction
The default value is row and it accepts: row | row-reverse | column | column-reverse.
index.html HTML Flex items

display
<main>
<img ...> vertically
<h1>...</h1>
<p>...</p>
<a>...</a>
</main>
site.css CSS
main {
display: flex;
flex-direction: column; }
Page Layout With ex-direction
Main elements for layout are ex items with the column direction.
index.html HTML
header
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
main
site.css CSS
body { footer
...
display: flex;
flex-direction: column; }
Mixing in Some Non-exbox CSS
Setting the page elements to 100% height uses all available space.
index.html HTML
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
site.css CSS
html, body, main {

height: 100%; } Stays at the bottom
of the screen
Level 2 Section 1
Justication and Order

Distributing Space Along Flex Lines
Example Patterns
Positioning elements
vertically
Positioning elements
horizontally
Flex Items Are Distributed Along Axes
The main axis is determined by the flex-direction.
<nav> @media screen and (min-width: 375px) {

<a ...>...</a> nav {
<a ...>...</a> display: flex; } }
<a ...>...</a>
</nav> center
start end
justify-content
Used to distribute space on the main axis, the default value is flex-start and it accepts:
flex-start | flex-end | center | space-between | space-around.
start
site.css CSS
@media screen and (min-width: 375px) {

nav {
display: flex;
justify-content: flex-start; } }
end
site.css CSS

nav {
display: flex;
justify-content: flex-end; } }
Spacing Values for justify-content
Flexboxs spacing algorithm distributes available space between elements.
Flush to edges, space in between

site.css CSS

nav {
display: flex;
justify-content: space-between; } }
Space added around each element

site.css CSS

nav {
display: flex;
justify-content: space-around; } }
Our Example Uses center

<a ...>...</a> nav {
<a ...>...</a> display: flex;
<a ...>...</a> justify-content: center; } }
</nav>
Content center aligns with container center

Adding Space With Non-exbox CSS
Margin and padding can be applied to ex items.

<a class="nav-brand">...</a> nav {
<a class="nav-link">...</a> display: flex;
<a class="nav-link">...</a> justify-content: center; }
</nav> .nav-link {
margin: 0 20px;} }
.nav-link
Justifying Content in a Column
Main elements for layout are ex items with the column direction.
start
index.html HTML
<main>
...
</main>
center of column
site.css CSS
main {
display: flex;
flex-direction: column;
justify-content: center; }
end
Level 2 Section 2
Justication and Order

Changing the Order of Items With CSS
Display Position Can Be Changed With CSS
order
order is used to determine the order of ex items along the main axis. It defaults to 0 and
accepts positive and negative numbers.
order: 0
Changing the Order of a Flex Item
Using a negative number displays an item rst, based on the flex-direction.

<a class="nav-brand">... ...
<a class="nav-clues">... .nav-clues {
<a class="nav-suspects">... order: -1; } }
</nav>
order: -1 order: 0 order: 0

Changing Order of a Flex Item in a Column
Order changes the position of items along the main axis of the column.
index.html HTML
<main>
<img ...>
<h1>...</h1>
<p class="slogan">...</p> order: 0
<a>...</a>
</main>
order: 0
site.css CSS order: 0
... order: 1
.slogan {
order: 1;
margin-top: 10px; }
Level 3
Aligning Alibis
Distributing Space Between Items
Distributing Space on the Cross Axis
Before Before After
After
Flex Items Are Aligned Along a Cross Axis
The cross axis is perpendicular to the main axis.
In column direction, the cross axis is horizontal
In row direction, the cross axis is vertical

align-items
Used to align content on the cross axis, the default value is stretch and it accepts:
stretch | flex-start | flex-end | center | baseline.

<a class="nav-brand">... .nav{
<a class="nav-clues">... align-items: stretch;
<a class="nav-suspects">... display: flex;
</nav> justify-content: center; } }
start
Stretch lls
center
available space
end
Start and End
start
site.css CSS

.nav{
align-items: flex-start;
... } }
site.css CSS

.nav{
align-items: flex-end;
... } }
end
Baseline and Center
site.css CSS

.nav{
align-items: baseline;
... } }
site.css CSS

.nav{
align-items: center;
... } }
Aligning Items in Column Direction
Items stretch to ll the width of the container. Centered horizontally
index.html HTML
<main>
...
</main>
site.css CSS
...
main {
... }
Level 4 Section 1
Sizing Up the Properties

New Properties for Space-based Size
Examples, Sized With Flex Properties
Grow to use available width
Dened widths for items

(Mostly) Default Behavior
index.html HTML
<div ...>
<label ...>...</label>
<input class="add-input">
<button ...>...</button>
</div>
site.css CSS Set min-width to 0
...
.add-input {
display: flex;
min-width: 0; }
Fills content space

ex-grow
Used to specify the ratio of the space an item should ll in the main axis. It accepts numbers
and the default is 0.

...
<div ...>
.add-label,
<label class="add-label">...
.add-input,
.add-button {
<button class="add-button">...
flex-grow: 0; }
</div>
Items dont grow

beyond content size
Using ex-grow for a Single Item
Assigning a value of 1 makes an item ll as much space as possible.
<div ...> ...

<label ...>...</label> .add-input {
<input class="add-input"> ...
<button ...>...</button> flex-grow: 1; }
</div>
Fills all
available
space
Using ex-grow for Multiple Items
Assigning a value of 1 to multiple properties will have them all try to ll as much space as
possible.

...
<div ...>
.add-label,
<label class="add-label">...
.add-input,
.add-button {
<button class="add-button">...
flex-grow: 1; }
</div>
Each item divides

the space
Using ex-grow With Empty Containers
Empty ex containers will divide the space according to the ratio.

.one,
<div class="one">...</div>
.three {
<div class="two">...</div>
flex-grow: 1; }
<div class="three">...</div>
.two {
flex-grow: 2; }
1000px
.one, 250px .two, 500px .three, 250px

Using ex-grow With Same-sized Content
Content alters how the algorithm divides space.

.one,
<div class="one">Width: 274px</div>
.three {
<div class="two">Width: 452px</div>
flex-grow: 1; }
<div class="three"> Width: 274px</div>
.two {
flex-grow: 2; }
1000px
Using ex-grow With Uneven Content
Content with dierent widths will aect the ratio size.

.one,
<div class="one">...</div>
.three {
<div class="two">...</div>
flex-grow: 1; }
<div class="three">...</div>
.two {
flex-grow: 2; }
1000px
16 characters 16 characters 18 characters

Growing Pains
We want the text item to resize, but not the image.
ex-shrink
Used to specify the shrink factor of a ex item. It accepts numbers and the default is 1.
index.html HTML
<article ...>
<div class="clue-img">...</div>
<div class="clue-info">...</div>
</article>
site.css CSS
...
.clue-img {
flex-shrink: 0; }
Does not reduce in width

ex-shrink: 0 in Action
The .clue-img div remains the same size.
Level 4 Section 2
Sizing Up the Properties

New Property for Setting Width Values
Problem: Dened Widths for Flex Items
Consistent widths
ex-basis
Used to specify the initial size of a ex item. It defaults to auto and currently supports CSS
units: %, px, em, rem, etc.
justify-content: space-between
index.html HTML
<article class="clue">
<div class="clue-img">...</div>
<div class="clue-info">...</div>
</article>
site.css CSS
...
.clue{
flex-basis: 47.5%; } 140px
.clue-img { 47.5%
flex-basis: 140px; }
Combining ex-basis and ex-shrink
With one item set to a pixel-based value, the other will adjust to ll the remaining space.
Using ex-basis and Absolute Units
Items with a flex-basis that is an absolute unit will not grow beyond the value by default.
site.css CSS
div {
flex-basis: 250px; }
The ex container is 1166px

Using ex-basis and relative units
Items with a relative flex-basis will grow to ll the space.
More ex-basis Properties Maybe!
There are more properties that are proposed but not currently implemented in browsers.
http://go.codeschool.com/ex-basis
Level 5 Section 1
Property Plotting
Aligning Content in Edge Cases
Our Layouts Could Use Some Polish
Can we make the heights match?
How can we center this?

align-self
Used to align individual ex items by overriding the align-items value. The default value is
stretch and it accepts: stretch | flex-start | flex-end | center | baseline.
<div class="fieldset"> .fieldset{

<label ...>...</label> align-items: center;
<input class="add-input"> display: flex; }
<button ...>...</button> .add-input {
</div> align-self: stretch; }
Stretch on the cross axis
Center on the cross axis

Using align-self in a Flex Column
index.html HTML Stretch in the

cross axis
<body ...>
<header>...<header>
<main>...</main>
<footer>...<footer>
</body> Center in the
cross axis
site.css CSS
body {
...
align-items: stretch; }
main { Stretch in the
align-self: center;
... } cross axis
Controlling Page Layout With ex-wrap
index.html HTML
<body ...>
<header>...<header>
<main>...</main>
<footer>...<footer> Each item
</body>
defaults to
stretch
site.css CSS
body {
...
flex-wrap: wrap; }
header, footer {
...
flex-basis: 100%; }
align-items Doesnt Control Wrapped Items
index.html HTML
<body ...>
<header>...<header>
<main>...</main>
<footer>...<footer>
</body>
No change?!
site.css CSS
body {
...
align-items: space-between;
flex-wrap: wrap; }
header, footer {
...
flex-basis: 100%; }
align-content
Used to align wrapped ex items. The default value is stretch and it accepts: stretch |
flex-start | flex-end | center | space-between | space-around.
index.html HTML
<body ...>
...</body>
site.css CSS
Space between
body { CSS
...
align-content: space-between;
flex-wrap: wrap; }
header, footer {
...
flex-basis: 100%; }
Level 5 Section 2
Property Plotting
Grouping Multiple Properties Into a Single Property
ex
Shorthand property used to set values for flex-grow, flex-shrink, and flex-basis. The
default is: 0 1 auto.
site.css CSS site.css CSS
.flex-item { .flex {
flex-grow: 0; flex: 0 1 auto; }
flex-shrink: 1;
flex-basis: auto; }
grow shrink basis
*If you have to support older IE, you may want to avoid shorthand.
More, Shorter Examples
Single number assigns the grow value
flex-grow: 1; flex: 1; }
flex-shrink: 1; /* Default */
flex-basis: auto; } /* Default */
Two numbers assigns the grow, shrink values
flex-grow: 1; flex: 1 0; }
flex-shrink: 0;
More, Short Examples
Single number and percentage assigns the grow and basis values
flex-grow: 1; flex: 1 47.5%; }
flex-shrink: 1; /* Default */
flex-basis: 47.5%; }
None sets shrink value, removing ex behavior
flex-grow: 0; /* Default */ flex: none; }
flex-shrink: 0;
ex-ow
Shorthand property used to set values for flex-direction and flex-wrap. The default is:
row nowrap.
flex-direction: row; /* Default */ flex-flow: row nowrap; }
flex-wrap: nowrap; } /* Default */
direction wrap
ex-ow Examples
Single direction value sets the direction and defaults to wrap
flex-direction: column; flex-flow: column; }
flex-wrap: nowrap; } /* Default */
Single wrap value sets the wrap and defaults to row
flex-direction: row; /* Default */ flex-flow: wrap; }
flex-wrap: wrap; }

CodeSchool CrackingTheCaseWithFlexbox

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CodeSchool CrackingTheCaseWithFlexbox

Transféré par

Droits d'auteur :

Formats disponibles

Level 1 Section 1

Two new display values

Vertically centered content

index.html HTML site.css CSS

<article class="setup">This ... article {

index.html HTML site.css CSS

<article class="setup">This ... article {

index.html HTML site.css CSS

<article class="setup">This ... article {

index.html HTML site.css CSS

<article class="setup">This ... article {

Uses all available width

index.html HTML site.css CSS

<article class="setup">This ... article {

index.html HTML site.css CSS

<article class="setup">This ... article {

No HTML element just text

Two ex items ll the available space of a horizontal ex line

index.html HTML site.css CSS

<article class="setup">This ... article {

index.html HTML site.css CSS

<article class="setup">This ... article {

Displaying ex items across multiple lines

Changing the direction of ex lines

Distributing space vertically

These could go below the image

index.html HTML site.css CSS

<article class="clue">...</article> .clue {

The div cant t here, so it wraps

index.html HTML site.css CSS

<article class="clue">...</article> .clue {

The ex items reverse in order

site.css CSS 667px wide 320px wide

index.html HTML Flex items

html, body, main {

Justication and Order

index.html HTML site.css CSS

<nav> @media screen and (min-width: 375px) {

@media screen and (min-width: 375px) {

@media screen and (min-width: 375px) {

Flush to edges, space in between

@media screen and (min-width: 375px) {

Space added around each element

@media screen and (min-width: 375px) {

index.html HTML site.css CSS

<nav> @media screen and (min-width: 375px) {

Content center aligns with container center

index.html HTML site.css CSS

<nav> @media screen and (min-width: 375px) {

Justication and Order

index.html HTML site.css CSS

<nav> @media screen and (min-width: 375px) {

order: -1 order: 0 order: 0

site.css CSS order: 0

In column direction, the cross axis is horizontal

In row direction, the cross axis is vertical

index.html HTML site.css CSS

<nav> @media screen and (min-width: 375px) {

@media screen and (min-width: 375px) {

@media screen and (min-width: 375px) {

@media screen and (min-width: 375px) {

@media screen and (min-width: 375px) {