Skip to content

Lab 5: Flexbox Layout

Due: Monday, Feb 24th

In this lab, you will use a variety of CSS positioning features to control the layout of a page. For standard CSS properties, please refer to the MDN CSS reference.

Starter Code

Download the following files to get started:

Requirements

You must complete the flex.css file using the rules provided for Step 1 and other rules that you add for Step 2. You must not modify the index.html file.

Implementing the layout in Steps 1 and 2 is not trivial and may require considerable trial-and-error. All aspects of this lab were implemented using only the following CSS properties (along with their -top, -left, etc. counterparts):

  • align-items
  • background-color
  • border
  • border-radius
  • color
  • column-gap
  • display
  • flex-basis
  • flex-direction
  • flex-grow
  • flex-wrap
  • font-family
  • height
  • justify-content
  • list-style
  • margin
  • padding
  • text-decoration
  • width

Step 1: Flexbox Fundamentals

Your main task is to create this layout using CSS. This image was created using Firefox's responsive design mode tool to specify a 1200x800 layout dimension. You should consult the annotated version for more details.

  • Nav and list each add 0.5rem vertical padding, while a adds 1rem horizontal.
  • Nav list is a flexbox.
  • Header has full width but 1.5rem padding on each side.
  • Body is a flexbox with wrapping rows.
  • Aside is a flex column 20vw wide with 2vw/2vh margins on right and top.
  • Aside element corners ar 2rem radius. Both p and h2 have 1rem padding.
  • Main uses 2% of viewport height and width as padding, occupies 74% of the viewport's width.
  • Main is a flexbox with gaps between columns that are 3% of the viewport width.
  • Main paragraphs have rounded borders and 1rem of padding all around.

Step 2: Media Queries

Your next task is to use CSS media queries to generate different layouts based on the screen size. First start by constructing the layout in the images below. The layout was set to 992x800, which required scrolling to see the full page.

  • 992 top / bottom
  • Annotated top / bottom
    • Body now is a column flexbox.
    • Main and header now use 96% of viewport width.
    • Aside is now 96% of viewport width with margin on side and bottom (2% each). Aside is still a flexbox, but notice the order.
    • H2 has width 10vw and div is the 240px image. Neither should grow.

Now create a set of rules for smaller than 992 pixels wide, creating the layout in the images below. This alternative layout was created as 800x800.

  • 800 top / bottom
  • Annotated top / bottom
    • Main has switched to a column layout.
    • Using flex-basis: auto prevents the articles from expanding.
    • Aside has switched its flexbox layout again.
    • P should have flex-basis set to full width of parent.

Submission

Submit your flex.css file to Gradescope.