Color Mode

Advanced Flexbox Layouts

In this assignment, you will build three complex layouts that demonstrate your mastery of advanced Flexbox techniques. Each layout presents unique challenges that require careful use of flex properties, nested containers, and proper alignment. You will apply the patterns from the Advanced Flexbox Patterns reading to create production-quality component layouts.

Understanding the Problem

Modern web applications require sophisticated component layouts that adapt to content and container size while maintaining visual hierarchy and usability. Simple Flexbox usage works for basic layouts, but complex interfaces demand precise control over item sizing, alignment across multiple nesting levels, and responsive behavior without excessive media queries. This assignment challenges you to think strategically about flex properties and nesting patterns to solve real-world layout problems.

Assignment Overview

You will create a three-page website, with each page demonstrating a different complex layout pattern. The starter files provide organized CSS structure and basic styling, allowing you to focus on implementing advanced Flexbox techniques. Each layout must use specific flex properties appropriately and include documentation explaining your decisions.

Required Layouts

Your site must include these three layouts, each on its own page:

Technical Requirements

Each layout must demonstrate proper use of these advanced Flexbox features:

Setup Instructions

1. Download Starter Files

Download the starter files and extract the contents. You will find:

2. Add to Your Portfolio

Copy the starter files into your portfolio repository: 


        portfolio/
        └── unit-2/
            └── flexbox-layouts/
                ├── css/
                │   ├── base/
                │   │   ├── reset.css
                │   │   ├── variables.css
                │   │   └── typography.css
                │   ├── layout/
                │   │   ├── dashboard.css
                │   │   ├── product.css
                │   │   └── article.css
                │   ├── components/
                │   │   └── buttons.css
                │   └── main.css
                ├── dashboard.html
                ├── product.html
                ├── article.html
                ├── README.md
                └── FLEXBOX-DECISIONS.md

3. Open and Examine the Files

Open each HTML file in your browser to see the current state without styling. The HTML structure is complete and semantic. Review the TODO comments in each layout CSS file to understand what needs to be implemented. The base/ and components/ directories are complete and provide foundation styles you will build upon.

Layout Specifications

1. Dashboard Interface

Create a dashboard layout with the following requirements:

The dashboard body must use Flexbox with flex-direction: column and min-height: 100vh. The middle section containing sidebar and main content uses nested Flexbox with flex: 1 to fill available vertical space.

Consider how flex-shrink: 0 on the sidebar prevents it from collapsing when content is wide. Think about whether the main content area should wrap cards using flex-wrap or use CSS Grid for the card layout.

2. Product Detail Page

Create a product page layout with these requirements:

The top section containing gallery and info panel should use Flexbox with flex-wrap: wrap so that on narrow viewports, the info panel wraps below the gallery. Set appropriate flex-basis values to control when wrapping occurs.

3. Article Layout

Create a magazine-style article layout with these requirements:

This layout requires careful attention to when content should wrap versus maintain side-by-side positioning. Use flex-wrap thoughtfully and set flex-basis values that represent minimum useful widths for each section.

Getting Started

After adding the starter files to your portfolio repository, begin by examining the provided structure. Review the css/base/variables.css file to understand available custom properties for spacing, colors, and typography. Read through all three layout specifications above so you understand the full scope of the assignment before starting to code.

Start with the dashboard layout as it introduces the foundational patterns of nested Flexbox and sticky footers that appear in the other layouts. Build one layout completely and test it thoroughly before moving to the next. Test at different viewport sizes as you work, not just at the end. Document your decisions as you make them in the FLEXBOX-DECISIONS.md file rather than trying to remember everything later.

Reference the Advanced Flexbox Patterns reading material as you work. The patterns discussed there directly apply to these layouts. If you find yourself fighting Flexbox behavior, review the Common Flexbox Gotchas section for solutions to typical problems.

Resources

Assignment Submission

Complete the form below to document your work. Once finished, download the PDF and submit it along with your portfolio repository link via Canvas.

Advanced Flexbox Layouts
Portfolio Links

Provide links to your three completed layouts:

Dashboard layout:

Product page layout:

Article layout:

Key Flexbox Decisions

Choose 2-3 specific implementation decisions from your layouts and explain why you made those choices. For example: how you achieved sticky footers in the dashboard cards, how you made the product page responsive, or how you controlled proportions in the article layout.

Challenges and Solutions

What challenges did you face while building these layouts? How did you solve them?

Submission

When you complete the assignment:

  1. Commit and push all your work to your portfolio repository
  2. Complete the interactive form above to document your Flexbox decisions
  3. Download the PDF from the form
  4. Submit both the portfolio repository link and the PDF via Canvas

Your portfolio should include all three completed layouts in the unit-2/flexbox-layouts/ directory. Ensure your layouts work in modern browsers and test at different viewport widths to verify responsive behavior works as intended.