3 of 18

CSS & Layouts

Layouts are the hardest thing about CSS for many reasons:

The language has many, many different layout ‘paradigms’ for doing the same thing.
Specifying the rules for arranging boxes the right way is difficult
You have to design for several different browser configurations (what looks good on a desktop doesn’t necessarily look good on mobile).
Everything has to be flexible and resizable so that it scales gracefully.

4 of 18

Layout Tips

Learn Flexbox (Today) – it’s worth the investment!
Learn CSS Grid (Next Monday) – also worth the investment
Design your website so that it is responsive (looks good on a mobile, tablet, and desktop). Using Flexbox and CSS Grid will help you with mobile layouts.
Avoid older hacks (floats, putting everything inside a table, absolute positioning) – or else use as a last resort.
We’ll go through some examples today and next Wednesday.

5 of 18

Outline

Overview
CSS Units
Media Queries
Intro to Flexbox

6 of 18

CSS Units: Absolute Units

Units	Example
Pixels	width: 300px;
Points	font-size: 12pt;

https://codepen.io/vanwars/pen/PoeYGJo?editors=0100

7 of 18

CSS Units: Relative Units

https://codepen.io/vanwars/pen/PoeYGJo?editors=0100

Units	Description	Example
em	Relative to the size of the parent element (2em means 2 times the parent element’s font size).	font-size: 2em;
rem	Relative to size of the root html element (2rem means 2 times the html element’s font size).. See em v. rem CodePen.	font-size: 2rem;
fr	“Fractional units” of the available space (within the parent element).	grid-template-columns: 1fr 1fr 40px 20%;
vw	Relative to 1% of the width of the viewport (size of browser window)	width: 30vw;
vh	Relative to 1% of the height of the viewport (size of browser window)	width: 10vw;
%	Relative to the parent element	width: 100%;

8 of 18

Outline

Overview
CSS Units
Media Queries
Intro to Flexbox

9 of 18

Using Media Queries

Media queries allow you to set CSS style rules based on the type of media and the device dimensions of the viewport. Example:

10 of 18

“Turning On” Media Queries in your HTML

In order to make sure that media queries are honored, you need to include a meta tag in the <head></head> of your html file:

11 of 18

Practice: 00-media-query

Tablet or Mobile

Desktop

12 of 18

Using Flexbox: Suggested Strategy

Parent Container�Put the display into “flex mode” display: flex and then use the following properties to align the child items:

align-items: (flex-start, flex-end, space-around, space-between, center)
justify-content: (same as align-items)
flex-direction: (row, column, row-reverse, column-reverse)
flex-wrap: (no-wrap, wrap, wrap-reverse)

Child Container

Apply sizing to the child container as needed, using the box model (padding, margin, width, height, border).

13 of 18

CodePen Demo

Add a border to all of the section tags
Make the height of the div 100% of the screen's height (viewport height)
Put all of the section tags on the same line

Hint: put the parent into flex mode

Center the sections horizontally within the parent container

Hint: set the parent’s justify-content property to “center”

Center the sections vertically within the parent container

Hint: set the parent’s align-items property to “center”

Experiment with the flex-direction property
Experiment with the flex-wrap property

14 of 18

Flexbox Froggy

15 of 18

Flexbox: Practice 2

Open 02-flexbox-wrapping. Can you create the following layouts?

16 of 18

Flexbox: Practice 1 Cont’d – Using Media Queries

Make it so that #1 is for Desktop screens, #2 is for Tablet, and #3 is for Mobile

17 of 18

Flexbox: Practice 2 (on your own)

Open 03-flexbox-media-queries and create these screens: