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.
Go to Step 2
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.
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.
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
Go to Step 4
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.
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
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.
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.
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.
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 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.
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.