CSS Flex Layout Exercise

This project is a sample exercise to investigate the use of CSS grid and flexbox for creating multi-column layouts. The goal is to understand how modern CSS layout techniques can be used to build responsive and visually appealing web pages.

Project Structure

• index.html — Main HTML file containing the layout structure.
• styles/reset.css — CSS reset to ensure consistent styling across browsers.
• styles/style.css — Main stylesheet implementing the 3-column layout using Flexbox.
• README.md — Project documentation and instructions.

Exercise Overview

• The layout features a navigation header and three columns, styled using Flexbox properties.
• The exercise demonstrates how to use display: flex, flex-direction, justify-content, and align-items to arrange elements in a row and control spacing.
• The project can be extended to compare Flexbox and CSS Grid approaches for similar layouts.

How to Use

1. Open index.html in your browser to view the layout.
2. Modify styles/style.css to experiment with different Flexbox or Grid properties.
3. Try converting the layout to use CSS Grid and observe the differences.

Learning Objectives

• Understand the basics of Flexbox and CSS Grid.
• Practice building multi-column layouts.
• Explore responsive design techniques.

References

• MDN Web Docs: Flexbox
• MDN Web Docs: CSS Grid