Learn CSS Flexbox by Roadtripping Across the Country

Master the fundamentals of CSS flexbox with this interactive tutorial

Get Started

Skip to Practice Section

Flexbox Roadtrip

Give Feedback
Show as Web Layout
Show HTML
<div class="northernRoadtrip">
    <div class="seattleVisit"></div>
    <div class="yellowstoneVisit"></div>
    <div class="mountrushmoreVisit"></div>
    <div class="chicagoVisit"></div>
    <div class="bostonVisit"></div>
</div>
<div class="westernRoadtrip">
    <div class="seattleVisit"></div>
    <div class="portlandVisit"></div>
    <div class="norCalVisit"></div>
</div>
<div class="westernRoadtrip">
    <div class="seattleVisit"></div>
    <div class="sanFranVisit"></div>
    <div class="sanDiegoVisit"></div>
</div>
<div class="centralRoadtrip">
    <div class="sanFranVisit"></div>
    <div class="stLouisVisit"></div>
    <div class="washingtonDCVisit"></div>
</div>
<div class="detourRoadtrip">
    <div class="seattleVisit"></div>
    <div class="denverVisit"></div>
    <div class="mountrushmoreVisit"></div>
</div>
<div class="otherRoadtrip">
    <div class="seattleVisit"></div>
    <div class="yellowstoneVisit"></div>
    <div class="mountrushmoreVisit"></div>
</div>

0 Days

14 Days

1. Sample Div
2. Sample Div
3. Sample Div
4. Sample Div
5. Sample Div
Stop 1- 2 Days
Stop 2-2 Days
Stop 3-2 Days
Stop 4-2 Days
Stop 5-2 Days

0 Days

14 Days

Go On a Flexbox Roadtrip

This tutorial will help you learn the major principles of CSS flexbox so you can create responsive websites.

Why do I need this?

Flexbox introduces an entirely different way to build responsive websites. No display inline-block/block, and no floats! If you can successfully learn the basics, you can write more maintanable code that is ready for mobile responsiveness

What is the focus?

You will plan a roadtrip using these properties:

  • justify-content
  • flex-direction
  • align-items
  • align-self
  • order

What do I need to know first?

You need to know HTML basics, as well as CSS's position property and display property.

Go to Step 1

The Ground Rules (1/18)

Let's establish some basic definitions

Show Grid

Here are the rules for our roadtrip:

1. The US Highway System is actually arranged on a grid system, going east-west and north-south. Click the button above to check it out.

2. For this tutorial, you can only travel along one direction at a time. Only north, south, east or west.

3. Our start point will be Seattle, in the top left corner.

The First Roadtrip (2/18)

We will go east from Seattle to Boston first

Here is a very basic example.

On our first trip, we will be taking the route east, from Seattle to Boston. We will be making three stops for 2 days apiece, the first will be Seattle itself, followed by Yellowstone National Park, followed by Mount Rushmore.

The final HTML will look like...

<div class="northernRoadtrip">
    <div class="seattleVisit"></div>
    <div class="yellowstoneVisit"></div>
    <div class="mountrushmoreVisit"></div>
</div>
Back

justify-content (3/18)

Determining left-to right spread of the trip

justify-content determines horizontal spacing

We can use justify-content to determine how our stops are spread out across the country. The default value is "flex-start", which aligns all divs to the left side.

The final CSS will look like...

 .northernRoadtrip{
    display:flex;
    justify-content:flex-start;
}

Quick review of other options:

  • Flex-end: all three stops on the east side of country
  • Center: all three stops in the middle of the country
  • Space-between: stop once at beginning and end with even spaced stops in middle
  • Space-around: Three evenly spaced stops in the middle of the country without stopping at beginning or end
Back

justify-content (4/18)

Determining left to right spread of the trip

Here is a test for you!

Let's say you want to stop in Yellowstone, Mount Rushmore and Chicago for 2 days apiece. What justify-content property would you use? Click "Show HTML" on the left if you need to review HTML structure.

Quick review of options:

  • Flex-end: all three stops on the right side of country
  • Center: all three stops in the middle of the country
  • Space-between: stop once at beginning and end with even spaced stops in middle
  • Space-around: Three evenly spaced stops in the middle of the country without stopping at beginning or end

The final CSS will look like...

.northernRoadtrip{
    display:flex;
    
}
Back
Go to Step 5

Does your answer contain a valid justify-content value?

justify-content (5/18)

Determining left to right spread of the trip

Here is one more test

Alright, now you want to stop in 5 areas across the US - Seattle, Yellowstone, Mount Rushmore, Chicago, and Boston. What justify-content property would you use? Click "Show HTML" on the left if you need to review HTML structure.

Quick review of options:

  • Flex-end: all three stops on the right side of country
  • Center: all three stops in the middle of the country
  • Space-between: stop once at beginning and end with even spaced stops in middle
  • Space-around: Three evenly spaced stops in the middle of the country without stopping at beginning or end

The final CSS will look like...

.northernRoadtrip{ display:flex; }

Back
Go to Step 6

Does your answer contain a valid justify-content value?

flex-direction (6/18)

Determining if divs flow horizontally or vertically

Here is a very basic example.

On our next trip, we will be taking the route south, with stops in Seattle, Portland and Northern California. The trip ends in San Diego.

The final HTML will look like...

<div class="westernRoadtrip">
    <div class="seattleVisit"></div>
    <div class="portlandVisit"></div>
    <div class="norCalVisit"></div>
</div>
Back

flex-direction (7/18)

Determining if divs flow horizontally or vertically

flex-direction allows us to go vertical

We can use flex-direction to go north-south. The default value is "row", which is left to right. "Column" allows us to go north to south.

The final CSS will look like...

 .westernRoadtrip{
    display:flex;
    flex-direction:column;
}

Quick review of other options:

  • Column: Travel top to bottom
  • Column-reverse: Travel bottom to top
  • row-reverse: right to left
Back

flex-direction (8/18)

Determining if divs flow horizontally or vertically

Simply stating flex-direction is not enough.

What kind of roadrip takes three stops at the very beginning, then drives 20 hours straight without stopping in California? Not a roadtrip you would want to be on.

You can combine "justify-content" with "flex-direction" to spread your divs vertically.

What combo would you use if you wanted to stop in Seattle, San Francisco and San Diego? Click "Show HTML" if you need a snippet.

Quick review of justify-content options:

  • Flex-end: all three stops at the end
  • Center: all three stops in the middle
  • Space-between: stop once at beginning and end with even spaced stops in middle
  • Space-around: Three evenly spaced stops in the middle of the country without stopping at beginning or end

The final CSS will look like...

.westernRoadtrip{ display:flex; }

Back
Go to Step 9

Does your answer contain a valid flex-direction value?

flex-direction (9/18)

Determining if divs flow horizontally or vertically

One more challenge

Alright, now let's say you want to go the opposite direction. You want to start in San Diego and hang out there for a few days, then head up to San Francisco, then finish the trip in Seattle.

The HTML is going to stay the same, so what CSS would you use to complete this trip, where you start at the bottom and go up?

Quick review of flex-direction options:

  • Column: Travel top to bottom
  • Column-reverse: Travel bottom to top
  • row-reverse: right to left

The final CSS will look like...

.westernRoadtrip{ display:flex; }

Back
Go to Step 10

Does your answer contain a valid flex-direction value?

align-items (10/18)

Determining if divs flow horizontally or vertically

Here is a very basic example.

Perhaps you know what to expect next! On our next trip, we will be taking the route east, starting in San Francisco, then stopping in Saint Louis, then ending in Washington DC. That's right, now we can adjust the vertical position of the whole line

The final HTML will look like...

<div class="centralRoadtrip">
    <div class="sanFranVisit"></div>
    <div class="stLouisVisit"></div>
    <div class="washDCVisit"></div>
</div>
Back

align-items (11/18)

Determining how far north or south your divs will go

align items allows us to take multiple paths across the country

If we want to take the central route across the US from west to east, we need to move all divs south! Align-items allows us to do this.

The final CSS will look like...

 .centralRoadtrip{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

Quick review of other options:

  • flex-start: default
  • flex-end: Align to bottom of United States
Back

align-items (12/18)

Determining how far north or south your divs will go

Now let's combine a couple concepts.

In the last part, we just looked at taking a central route. Now let's combine two concepts you have already learned.

Now, you want to take a roadtrip that starts in Jacksonville, FL, in the southeast corner of the US. You then want to stop in Dallas, Texas, then head on over to San Diego. You are starting east, and going west, and you need to write the CSS to get there.

Quick review of align-items options:

  • flex-start: default
  • center: align to center of united states
  • flex-end: Align to bottom of United States

The final CSS will look like...

.southernRoadtrip{ display:flex; justify-content:space-between; }

Back
Go to Step 13

Does your answer contain a valid flex-direction value?

align-self (13/18)

Finally able to move outside of a straight line

Make stops along different routes

So far, all the rules have assumed that you are travelling along one route- going north, south, east or west. Of course, on real roadtrips, you probably want to make a detour in order to see speficic sites. Align-self allows you to change your north-south positioning so you can take a stop that is out of line with the rest.

Now we are taking a roadtrip that starts in Seattle, stops in Denver before heading back up to Mount Rushmore.

The final HTML will look like...

<div class="detourRoadtrip">
    <div class="seattleVisit"></div>
    <div class="denverVisit"></div>
    <div class="mountrushmoreVisit"></div>
</div>
Back

align-self (14/18)

Finally able to move outside of a straight line

align-self allows us to take a detour

Denver is not along the northern roadtrip, but we need to write the CSS that will allow us to stop there.

The final CSS will look like...

 .detourRoadtrip{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}
.denverVisit{
    align-self:center;
}

Quick review of other options:

  • flex-start: default
  • center: Align to center of United States
  • flex-end: Align to bottom of United States
Back

align-self (15/18)

Finally able to move outside of a straight line

Here's your challenge

Now, you want to take a roadtrip that starts in San Francisco, makes a stop in Chicago (northern), then heads on to Washington DC to finish the trip. You need to write the CSS to get there.

Quick review of align-items options:

  • flex-start: default
  • center: align to center of united states
  • flex-end: Align to bottom of United States

The final CSS will look like...

.detourRoadtrip{ display:flex; justify-content:space-between; } .chicagoVisit{ }

Back
Go to Step 16

Does your answer contain a valid align-self value?

order (16/18)

Divs appear in different order than HTML

Make your stops out of order

Alright, most logical people would make their stops in a general order that would not cause them to double back and create extra driving. But sometimes, there are exceptions. Like that sausage making competition in Chicago that you absolutely need to see. Or a square dance festival near Mount Rushmore.

What if our roadtrip starts in Seattle, but then goes to Mount Rushmore before heading back to Yellowstone. BUT...

The final HTML will look like...

<div class="otherRoadtrip">
    <div class="seattleVisit"></div>
    <div class="yellowstoneVisit"></div>
    <div class="mountrushmoreVisit"></div>
</div>
Back

order (17/18)

Divs appear in different order than HTML

Change the order around with HTML

The Mount Rushmore trip is third in HTML, but should be second stop on the trip. We can use the order property to fix this. The default value for order is 0, so we can change the system around by giving seattleVisit a value of -2, and mountRushmoreVisit a value of -1. Yellowstone will follow.

The final CSS will look like...

 .otherRoadtrip{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}
.seattleVisit{
    order:-2;
}
.mountRushmoreVisit{
    order:-1;   
}

Quick review of order

  • Lowest ordered div comes first
  • Divs no longer reflect the order of HTML
Back

order (18/18)

Divs appear in different order than HTML

Here's your challenge

Now, you want to take a roadtrip that starts in San Francisco, makes a stop in Denver, then goes backward to Salt Lake City. You need to write the CSS to get there.

Quick review of order

  • Lowest ordered div comes first
  • Divs no longer reflect the order of HTML

The final CSS will look like...

.otherRoadtrip{ display:flex; align-items:center; justify-content:flex-start; } .sanfranRoadtrip{ } .denverRoadtrip{ }

Back
Go To Practice Problems

Does your answer contain a valid order value?

Challenge 1/5

Test out your skills

Here's your challenge

Here is your trip. Can you write the code that will get you there?

Start in Seattle

Continue to Saint Louis

End in Jacksonville

The final CSS will look like...

.roadtrip{ display:flex; align-items:flex-start; flex-direction:row; justify-content:space-between; } .stLouisRoadtrip{ } .jacksonvilletrip{ }

Review the Docs

Highlight on Map
Run It

Do you remember which property moves individual divs vertically?

Challenge 2/5

Test out your skills

Here's your challenge

Here is your trip. Can you write the code that will get you there?

Start in Dallas

Continue to San Francisco

End in Mount Rushmore

The final CSS will look like...

.roadtrip{ display:flex; justify-content:space-between; } .sanFranRoadtrip{ }

Review the Docs

Highlight on Map
Run It

Do you remember how the system changes when you change flex-direction?

Challenge 3/5

Test out your skills

Here's your challenge

Here is your trip. Can you write the code that will get you there?

Start in Boston

Continue to Mount Rushmore

End in San Diego

The final CSS will look like...

.roadtrip{ display:flex; justify-content:space-between; } .sanDiegoRoadtrip{ }

Review the Docs

Highlight on Map
Run It

Do you remember how the system changes when you change flex-direction?

Challenge 4/5

Test out your skills

Here's your challenge

Here is your trip. Can you write the code that will get you there?

Start in Buffalo

Continue to Saint Louis

End in Idaho

The final CSS will look like...

.roadtrip{ display:flex; align-items:flex-start } .saintlouisRoadtrip{ }

Review the Docs

Highlight on Map
Run It

Do you remember how to align divs so that they do not hug the borders of the container?

Challenge 5/5

Test out your skills

Here's your challenge

Here is your trip. Can you write the code that will get you there?

Start in San Diego

Continue to Saint Louis

End in Seattle

The final CSS will look like...

.roadtrip{ display:flex; align-items:flex-start } .saintlouisRoadtrip{ }

Review the Docs

Highlight on Map
Run It

Do you remember how to align divs so that they do not hug the borders of the container?

Congrats! You made it!

Hit the "Feedback" button above if you have suggestions.