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

index.html HTML site.css CSS

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

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

Collapsed
Flex Containers Control Layout of Child Items

index.html HTML site.css CSS

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

<img height="150" height="150" ...> border: 1px solid #d1eda6;
<p>...</p> display: flex; }
</article>

Flex container

Aligned horizontally
display: ex Creates a Block-level Container

index.html HTML site.css CSS

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

<img height="150" height="150" ...> border: 1px solid #d1eda6;
<p>...</p> display: flex; }
</article>

Uses all available width

display: inline-ex Creates an Inline Container

index.html HTML site.css CSS

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

<img height="150" height="150" ...> border: 1px solid #d1eda6;
<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.

index.html HTML site.css CSS

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

<img height="150" height="150" ...> border: 1px solid #d1eda6;
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.

index.html HTML site.css CSS

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

<img height="150" height="150" ...> border: 1px solid #d1eda6;
<h3>...</h3> display: flex; }
<p>...</p>
</article>

Three ex items
 Grouping Elements Into Flex Items
Grandchild elements do not become ex items.

index.html HTML site.css CSS

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

<img height="150" height="150" ...> border: 1px solid #d1eda6;
<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.

index.html HTML site.css CSS

<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.

index.html HTML site.css CSS

<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.

index.html HTML site.css CSS

<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

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

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

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

nav {
display: flex;
justify-content: space-between; } }

Space added around each element

site.css CSS

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

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

index.html HTML site.css CSS

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

<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.

index.html HTML site.css CSS

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

<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.

index.html HTML site.css CSS

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

<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.

index.html HTML site.css CSS

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

<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

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

.nav{
align-items: flex-start;
... } }

site.css CSS

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

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

site.css CSS

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

.nav{
align-items: baseline;
... } }

site.css CSS

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

.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 {
align-items: center;
... }
 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 {
align-items: center;
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.

index.html HTML site.css CSS

...
<div ...>
.add-label,
<label class="add-label">...
.add-input,
<input class="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.

index.html HTML site.css CSS

<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.

index.html HTML site.css CSS

...
<div ...>
.add-label,
<label class="add-label">...
.add-input,
<input class="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.

index.html HTML site.css CSS

.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.

index.html HTML site.css CSS

.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.

index.html HTML site.css CSS

.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.

index.html HTML site.css CSS

<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

site.css CSS site.css CSS

.flex-item { .flex {
flex-grow: 1; flex: 1; }
flex-shrink: 1; /* Default */
flex-basis: auto; } /* Default */

Two numbers assigns the grow, shrink values

site.css CSS site.css CSS

.flex-item { .flex {
flex-grow: 1; flex: 1 0; }
flex-shrink: 0;
flex-basis: auto; } /* Default */
More, Short Examples
Single number and percentage assigns the grow and basis values

site.css CSS site.css CSS

.flex-item { .flex {
flex-grow: 1; flex: 1 47.5%; }
flex-shrink: 1; /* Default */
flex-basis: 47.5%; }

None sets shrink value, removing ex behavior

site.css CSS site.css CSS

.flex-item { .flex {
flex-grow: 0; /* Default */ flex: none; }
flex-shrink: 0;
flex-basis: auto; } /* Default */
ex-ow
Shorthand property used to set values for flex-direction and flex-wrap. The default is:
row nowrap.

site.css CSS site.css CSS

.flex-item { .flex {
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

site.css CSS site.css CSS

.flex-item { .flex {
flex-direction: column; flex-flow: column; }
flex-wrap: nowrap; } /* Default */

Single wrap value sets the wrap and defaults to row

site.css CSS site.css CSS

.flex-item { .flex {
flex-direction: row; /* Default */ flex-flow: wrap; }
flex-wrap: wrap; }