Flexbox Learning

A collection of practical HTML and CSS examples designed to help developers learn and master CSS Flexbox layout techniques.

Built in November 2018, this educational project offers hands-on examples of common layout patterns such as responsive navigation menus, flexible grid systems, item ordering, alignment control, and nested flex containers. It is intended for beginners and intermediate developers to practice real UI layouts by editing code directly in the browser and observing changes instantly. No build tools or dependencies are required, making it lightweight and easy to explore.

Features

• 📱 Responsive navigation menus with mobile-first design
• 🔄 Item reordering using the order property
• 🎨 Multiple layout examples (grid, stack, horizontal)
• 📦 Nested flexbox containers
• 🎯 Interactive grid/stack toggle example
• 💡 Clean, well-commented CSS for learning
• 🌐 Cross-browser compatible
• 🚀 No build process - pure HTML & CSS

Core Capabilities

• Responsive Layouts: Mobile-first approach with media queries
• Flex Properties: Demonstration of flex-grow, flex-shrink, and flex-basis
• Alignment Control: justify-content, align-items, and align-self
• Item Reordering: Visual reordering without changing HTML structure
• Nested Containers: Complex layouts with nested flex containers
• Interactive Examples: Dynamic grid/stack switching

Technical Excellence

• Pure HTML/CSS: No build tools or dependencies required
• Semantic HTML: Well-structured, accessible markup
• Clean Code: Well-commented examples for easy learning
• Cross-Browser Support: Works in all modern browsers
• Performance Optimized: Lightweight and fast-loading

Developer Experience

• Live Preview: Open any HTML file in your browser to see changes immediately
• VSCode Friendly: Works great with Live Server extension for auto-reload
• No Setup Required: Clone and start learning instantly
• Progressive Complexity: Examples start simple and get more advanced

Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• A code editor (VSCode recommended)
• Basic knowledge of HTML and CSS

Installation

1. Clone the repository:

git clone https://github.com/orassayag/flexbox-learning.git
cd flexbox-learning

2. Open any HTML file in your browser:
   • Use VSCode's Live Server extension, or
   • Double-click any .html file to open in your default browser

No dependencies or build process required!

Usage

Viewing Examples

Using Live Server (Recommended):

1. Install VSCode's "Live Server" extension
2. Right-click any .html file
3. Select "Open with Live Server"

Direct Browser Opening:

• Double-click any .html file to open in your browser

Learning Path

1. Project 2 Basic Container - Start with project2/index.html to understand flex fundamentals
2. Item Ordering - Explore project1/index.html to see the order property in action
3. Responsive Menu - Check project1/example-1/menu.html for mobile-first navigation
4. Nested Menu - Look at project1/example-2/nested-menu.html for nested flex containers
5. Grid/Stack Toggle - Play with project1/example-3/grid-vs-stack.html for dynamic layouts

Configuration

This project requires no configuration! It's designed to work out of the box with pure HTML and CSS.

Browser Configuration

For best experience, use a modern browser with developer tools to inspect flex properties.

Architecture

Directory Structure

flexbox-learning/
├── project1/
│   ├── index.html          # Item ordering example
│   ├── example-1/
│   │   ├── menu.html       # Responsive navigation menu
│   │   └── style.css
│   ├── example-2/
│   │   ├── nested-menu.html # Navigation with social media
│   │   └── style.css
│   └── example-3/
│       ├── grid-vs-stack.html # Interactive grid/stack
│       └── style.css
├── project2/
│   ├── index.html          # Basic flex container
│   └── style.css
├── .gitignore
├── .prettierrc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── INSTRUCTIONS.md
├── LICENSE
├── README.md
└── SECURITY.md

Architecture Principles

• Simplicity First: No build tools or dependencies - pure HTML/CSS
• Progressive Complexity: Examples start simple and increase in complexity
• Commented Code: Every example includes explanatory comments
• Responsive Design: Mobile-first approach with media queries
• Accessibility: Semantic HTML for better accessibility
• Maintainability: Clear directory structure and file organization

Design Patterns

• Flex Container: Parent element with display: flex
• Flex Items: Direct children with flex properties
• Responsive Menu: Mobile-first navigation that collapses/expands
• Grid Layout: Using flex-wrap for grid structures
• Nested Containers: Complex layouts with multiple levels of flex containers
• Toggle Pattern: Interactive layout switching with JavaScript

Available Scripts

Since this is a pure HTML/CSS project, there are no build or npm scripts! Just open the HTML files in your browser.

Quick Access:

• Open project1/index.html for item ordering example
• Open project1/example-1/menu.html for responsive menu
• Open project1/example-2/nested-menu.html for nested menu
• Open project1/example-3/grid-vs-stack.html for grid/stack toggle
• Open project2/index.html for basic container

Best Practices

Flexbox Best Practices

1. Use flex shorthand: Prefer flex: 1 1 0 over individual properties
2. Mobile-first design: Start with mobile layout, then use media queries for larger screens
3. Comment your code: Explain what each flex property does for learning
4. Test responsiveness: Resize your browser to ensure layouts work on all screen sizes
5. Use semantic HTML: Ensure your markup is accessible and meaningful

Development Best Practices

1. Use Live Server: Auto-reload makes experimenting easier
2. Inspect elements: Use browser dev tools to see flex properties in action
3. Make small changes: Modify one property at a time to see its effect
4. Read comments: The examples include explanatory comments
5. Practice: Try modifying the examples to create your own layouts

Project Structure

graph TD
    A[Flexbox Learning] --> B[Project 1: Flexbox Examples]
    A --> C[Project 2: Basic Container]

    B --> D[index.html<br/>Item Ordering]
    B --> E[example-1<br/>Responsive Menu]
    B --> F[example-2<br/>Nested Menu]
    B --> G[example-3<br/>Grid vs Stack]

    C --> H[index.html<br/>Basic Flexbox Container]

    style A fill:#4A90E2
    style B fill:#7ED321
    style C fill:#7ED321
    style D fill:#F5A623
    style E fill:#F5A623
    style F fill:#F5A623
    style G fill:#F5A623
    style H fill:#F5A623

Loading

Project 1 - Flexbox Examples (project1/)

File	Description	Concepts
index.html	Item ordering without changing HTML	order, flex, justify-content: space-between
example-1/menu.html	Responsive navigation menu	flex: 1 1 0, justify-content: flex-start, media queries
example-2/nested-menu.html	Navigation with social media icons	Nested flex containers, justify-content: space-between
example-3/grid-vs-stack.html	Interactive article grid with toggle	flex-wrap, flex-basis, dynamic layouts, transitions

Project 2 - Basic Container (project2/)

File	Description	Purpose
index.html	Simple flexbox container with colored boxes	Starting point for experiments

Flexbox Concepts Demonstrated

Core Properties

/* Create a flex container */
display: flex;

/* Control item growth and size */
flex: 1 1 0; /* flex-grow flex-shrink flex-basis */

/* Horizontal alignment */
justify-content: space-between; /* or flex-start, flex-end, center, space-around */

/* Vertical alignment */
align-items: center; /* or flex-start, flex-end, stretch */

/* Reorder items visually */
order: 2;

/* Allow wrapping */
flex-wrap: wrap;

Example Flows

Example 1: Responsive Navigation

sequenceDiagram
    participant Mobile as Mobile View
    participant Desktop as Desktop View (768px+)

    Mobile->>Mobile: Vertical stacked menu
    Note over Mobile: No flexbox applied

    Desktop->>Desktop: Apply display: flex
    Desktop->>Desktop: Items arranged horizontally
    Desktop->>Desktop: flex: 1 1 0 (equal width)
    Note over Desktop: Responsive menu!

Loading

Example 3: Grid Toggle Flow

stateDiagram-v2
    [*] --> GridLayout
    GridLayout --> StackLayout: Click "Stack"
    StackLayout --> GridLayout: Click "Grid"

    GridLayout: Article Grid<br/>flex: 0 1 32%<br/>3 columns
    StackLayout: Article Stack<br/>flex: 0 1 100%<br/>1 column

Loading

Learning Path

1. Start Simple - Open project2/index.html and experiment in the CSS
2. Learn Ordering - View project1/index.html to see the order property
3. Build Menus - Progress through example-1, example-2, example-3
4. Experiment - Modify the CSS and see results in real-time

Browser Support

✅ Chrome 29+
✅ Firefox 28+
✅ Safari 9+
✅ Edge 12+
✅ Opera 17+

Use Cases

This project demonstrates Flexbox solutions for:

• Responsive navigation bars
• Equal-height columns
• Centering content vertically and horizontally
• Reordering items for different screen sizes
• Building grid layouts without CSS Grid
• Creating flexible card layouts

Development

Testing Your Changes

1. Make changes to CSS files
2. Refresh your browser to see results
3. Test responsive behavior by resizing the browser window
4. Use browser DevTools to inspect flexbox properties

Validation

• W3C HTML Validator
• W3C CSS Validator

Additional Resources

• CSS-Tricks: Complete Guide to Flexbox
• MDN: Flexbox
• Flexbox Froggy - Learn through games

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details on the code of conduct and the process for submitting pull requests.

Author

• Or Assayag - Initial work - orassayag
• Or Assayag orassayag@gmail.com
• GitHub: https://github.com/orassayag
• StackOverflow: https://stackoverflow.com/users/4442606/or-assayag?tab=profile
• LinkedIn: https://linkedin.com/in/orassayag

License

This application has an MIT license - see the LICENSE file for details.

Acknowledgments

• Built for educational and research purposes
• Respects robots.txt and implements rate limiting
• Uses user-agent rotation to avoid detection
• Implements polite crawling practices