1 of 23

Creating Page Layouts w/CSS: Flex

CS 130: �Tools and Technologies of the World Wide Web

Spring, 2022

1

2 of 23

Outline

  1. The Box Model
  2. Semantic Tags (a reminder)
  3. Media Queries
  4. Intro to Flexbox

2

3 of 23

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.

3

4 of 23

Layout Tips

  • Learn Flexbox (Today) – it’s worth the investment!
  • Learn CSS Grid (Wednesday, Tutorial 4) – 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 on Wednesday.

5 of 23

Activity: Composing a Layout in CSS

Let’s deconstruct this template website:

  • How does this website instantiate the principles of:
    • Proximity (think whitespace)
    • Alignment (think grid)
    • Repetition
    • Contrast
  • Let’s draw some boxes...
  • Let’s think about how to create this layout. Some properties to highlight:
    • Responsiveness
    • relative units
    • Margin and padding!

5

6 of 23

Outline

  • The Box Model
  • Semantic Tags (a reminder)
  • Media Queries
  • Intro to Flexbox

6

7 of 23

The Box Model

7

References:

  • W3 Schools
  • Lynda.com Video

8 of 23

The Box Model

  1. margin
  2. padding
  3. border
  4. width
  5. box-sizing (border-box v. content box)
  6. display (block, inline-block, inline, grid, none, etc.)

9 of 23

Exercise 1: Box Model

Open 01-box-model and create this card:

​

10 of 23

Outline

  • The Box Model
  • Semantic Tags (a reminder)
  • Media Queries
  • Intro to Flexbox

10

11 of 23

Semantic, Block-Level Elements

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

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

12 of 23

Semantic, Inline Elements

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

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

13 of 23

Outline

  • The Box Model
  • Semantic Tags (a reminder)
  • Media Queries
  • Intro to Flexbox

13

14 of 23

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:

15 of 23

“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:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

16 of 23

Challenge: Can you make the card look different on a mobile device?

16

17 of 23

Outline

  • The Box Model
  • Semantic Tags (a reminder)
  • Media Queries
  • Intro to Flexbox

17

18 of 23

Flexbox Resources

  • Typically used when you have many child containers that you want to flow within a parent container.
  • Lets you specify a few generic rules that will control how the children of a container are positioned

​

Some resources:

  • Flexbox Froggy (interactive game)
  • Flexbox (course website)
  • Grid v. Flexbox: Which to use when?

19 of 23

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.

20 of 23

Flexbox: Practice 1

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

1

2

3

21 of 23

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

1

2

3

22 of 23

Flexbox: Practice 2 (Lab 1)

​

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

​

Desktop

Tablet

Mobile

23 of 23

Flexbox: Practice 3: Navigation Bar

Open 04-nav-bar, and try to make the following:

​