HTML and CSS / Week 4

Today, we’re looking at Layouts with Flexbox. How can we use Flebox layout mechanisms to build a website?

Source Code: https://glitch.com/~watertown-week-4-flexbox

Example Layout:

Flexbox attributes we’ve used:

  • display: flex; to turn it on
  • flex-direction: row; / flex-direction: column; to determine if we want items to be aligned in a row or column
  • justify-content: center; / justify-content: flex-start; / justify-content: flex-end; to determine the alignment of each item.

Links:

Homework: Work through flexboxfroggy.com