Skip to content
One of the most powerful and versatile tools in modern web design: CSS Flexbox, or Flexible Box Layout. This module is a game-changer for creating complex layouts with ease and consistency.
Share
Explore
MADS 4007: CSS Code Along Sheet for Layouts with CSS Flex
Lecture: Introduction to CSS Flexbox Layout
Learning outcomes:
What is CSS Flexbox?
CSS Flexbox is a layout model that allows you to design complex layouts more efficiently and predictably.
It's a one-dimensional layout method, meaning it deals with layouts in either a row or a column, but not both simultaneously.
Flexbox makes it easier to design flexible responsive layout structures without using float or positioning.
Understanding Flexbox Concepts
To get started with Flexbox, you need to understand some basic concepts:
Flex Container: The element that uses the `display: flex` property becomes a flex container.
It's the parent element that holds flex items.
Flex Items: The children of a flex container automatically become flex items.
They can be laid out in any direction and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing.
Main Axis and Cross Axis:
Flexbox revolves around two axes.
The main axis is defined by the `flex-direction` property and can be either horizontal (row) or vertical (column).
The cross axis runs perpendicular to the main axis.
Construction of a Flexbox Layout
Creating a Flexbox layout involves two main steps:
1. Define a Flex Container:** Apply `display: flex` or `display: inline-flex` to the parent element.
<div style="display: flex;">
<!-- Flex items here -->
</div>
2. Configure Flex Items: Use flex properties to control the size and alignment of the child elements within the flex container.
Key Properties of Flexbox
- `flex-direction`: Defines the direction of the flex items along the main axis (e.g., `row`, `column`).
- `justify-content`: Aligns items along the main axis (e.g., `center`, `space-between`).
- `align-items`: Aligns items along the cross axis (e.g., `center`, `stretch`).
- `flex-grow`, `flex-shrink`, `flex-basis`: Control how flex items grow and shrink.
Usage and Applications
Flexbox is particularly useful in several scenarios:
- Responsive Design: Adjusts layout components dynamically, making it perfect for responsive designs.
- Centering Elements: Simplifies the centering of elements both vertically and horizontally.
- Dynamic Layouts: Create layouts that adapt to the content's size, such as variable-width sidebars.
Practical Example
Consider a navigation bar with a logo, links, and a search bar.
With Flexbox, you can easily align these items, adjust their spacing, and make the navigation bar responsive.
```html
<nav style="display: flex; justify-content: space-between; align-items: center;">
<div>Logo</div>
<div>Links</div>
<div>Search Bar</div>
</nav>
```
Next replace Logo, Links, Search Bar with images
To ensure that the images in your `<nav>` container have consistent heights while using **CSS Flexbox**, you can apply a fixed height to the images and use the `object-fit` property to ensure that they maintain their aspect ratios.
This allows the images to fit within a consistent height without being distorted.
Here’s how you can do it:
### Updated HTML and CSS:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Images</title>
<style>
/* Styling for the flex container */
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Image container styling */
nav div {
flex: 1; /* Allow the div to grow equally */
padding: 0 10px; /* Adds some spacing between images */
}
/* Image styling */
nav img {
height: 150px; /* Set a consistent height */
width: auto; /* Let the width auto-adjust to maintain aspect ratio */
object-fit: cover; /* Ensure images fill the container without distortion */
}
</style>
</head>
<body>
<nav>
<div><img src="bamf.jpg" alt="Bamf"></div>
<div><img src="iceland.jpg" alt="Iceland"></div>
<div><img src="maroonbells.jpg" alt="Maroon Bells"></div>
</nav>
</body>
</html>
```
### Explanation:
1. **Flexbox Setup (`nav`)**:
- `display: flex;` enables Flexbox on the `<nav>` container.
- `justify-content: space-between;` evenly distributes space between the image containers (divs).
- `align-items: center;` aligns the image containers along the center of the flex container.
2. **Image Container (`nav div`)**:
- `flex: 1;` ensures that each `<div>` grows equally within the flex container, distributing space.
- `padding: 0 10px;` adds spacing between the images to avoid them being too close to each other.
3. Image Styling (`nav img`)
- `height: 150px;` makes sure that all images have the same height.
- `width: auto;` ensures that the image width adjusts automatically based on the aspect ratio.
- `object-fit: cover;` ensures that the images cover the given height (150px) without distorting, cropping them if necessary to maintain the aspect ratio.
Result:
This code will ensure that all images have the same height while maintaining their aspect ratios, making them consistent in height without distorting or squishing the images. The flexbox ensures the layout is responsive and well-aligned.
Conclusion
Flexbox is a powerful tool that makes layout design intuitive and efficient.
It's widely supported by modern browsers and has become a staple in the web developer's toolkit.
Next topics:
We will dive deeper into Flexbox, exploring complex layouts and real-world examples.
We'll also look at Flexbox in conjunction with other CSS features like Grid and Media Queries to build fully responsive designs.
Comprehensive Example of CSS Flexbox Layout
Objective
To demonstrate a simple but comprehensive example of a layout using CSS Flexbox, illustrating the versatility and power of this layout model.
Scenario
Let's create a typical webpage layout with a header, a navigation bar, a main content area, a sidebar, and a footer.
This layout will adapt to different screen sizes using Flexbox.
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Layout Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>Header</header>
<nav>Navigation Bar</nav>
<div class="main-container">
<main>Main Content</main>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</body>
</html>
Here, we have defined a basic HTML structure with a `<header>`, `<nav>`, `<main>`, `<aside>`, and `<footer>`.
CSS with Flexbox
Put this code into file named: styles.css
```css
body {
margin: 0;
font-family: Arial, sans-serif;
}
header, nav, main, aside, footer {
padding: 20px;
border: 1px solid #ddd;
}
header, footer {
background-color: #f3f3f3;
}
.main-container {
display: flex;
flex-wrap: wrap;
}
main {
flex: 1; /* Flex grow */
min-width: 200px; /* Minimum width before wrapping */
}
aside {
flex-basis: 200px; /* Base width of the sidebar */
}
nav {
background-color: #e3e3e3;
}
```
- The `.main-container` class is given `display: flex;` making it a flex container.
- `flex-wrap: wrap;` allows flex items to wrap onto multiple lines, from top to bottom.
- For `<main>`, `flex: 1;` allows it to grow and fill up the available space.
- `<aside>` is given a `flex-basis` of `200px`, setting its initial size.
- `min-width` in `<main>` ensures content doesn't get too squished.
Explanation of Flexbox Properties
1. **Flex Container (`display: flex;`):** The `.main-container` becomes a flex container, allowing direct children (`<main>` and `<aside>`) to lay out flexibly.
2. **Flex Item (`flex` property):** The `flex` property on `<main>` tells it to grow and take up any available space, ensuring the main content area is flexible and responsive.
3. **Flex Basis (`flex-basis`):** The `flex-basis` on `<aside>` sets a base size for the sidebar, dictating how it flexes relative to other elements.
4. **Flex Wrap (`flex-wrap`):** `flex-wrap: wrap;` allows elements to wrap onto multiple lines instead of squeezing into a single row, enhancing responsiveness.
Result
With this setup:
- The header and footer span the full width of the page.
- The navigation bar is also full-width, sitting below the header.
- The main content and sidebar are side by side. If the screen size reduces, the sidebar will wrap below the main content due to `flex-wrap`.
- The sidebar maintains a consistent width, and the main content area adjusts flexibly.
Conclusion
This example demonstrates the power of CSS Flexbox in creating a flexible, responsive web page layout.
Flexbox's simplicity and efficiency in handling both horizontal and vertical alignment make it an excellent choice for modern web design.
Experiment with these properties in your own projects to get a better grasp of their capabilities.
CSS Flexbox Layout Example: Men's Wear eCommerce Website
Objective
Create a responsive layout for a men's wear eCommerce website using CSS Flexbox, focusing on a vertical orientation suitable for showcasing products.
Scenario
The website layout will include:
- A header with the site's logo and navigation menu.
- A main content area with product categories.
- A promotional banner section.
- A footer for additional information and links.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Men's Wear Flexbox Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">Men's Fashion</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Sale</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="category">
<article>Suits</article>
<article>Shirts</article>
<article>Trousers</article>
<article>Accessories</article>
</section>
<section class="promo-banner">Seasonal Sale!</section>
</main>
<footer>
<p>© 2024 Men's Fashion. All rights reserved.</p>
</footer>
</body>
</html>
#### CSS with Flexbox
styles.css
body {
margin: 0;
font-family: 'Arial', sans-serif;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: white;
}
header .logo {
font-size: 24px;
}
header nav ul {
list-style-type: none;
display: flex;
padding: 0;
}
header nav ul li {
margin-left: 20px;
}
header nav ul li a {
color: white;
text-decoration: none;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.category {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.category article {
flex-basis: 200px;
margin: 10px;
padding: 20px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #ddd;
}
.promo-banner {
width: 100%;
padding: 10px;
margin-top: 20px;
text-align: center;
background-color: #ff4500;
color: white;
}
footer {
padding: 10px 20px;
background-color: #333;
color: white;
text-align: center;
}
```
Explanation of Flexbox Properties
1. **Header:** Uses `display: flex` to align the logo and navigation menu.
`justify-content: space-between` ensures the logo and menu are spaced out on opposite ends.
2. **Navigation Menu:** A horizontal flex container where each list item is a flex item. This creates a horizontally aligned menu.
3. **Main Content (Categories):** A flex container with `flex-direction: column` to stack the categories and promo banner vertically.
4. **Product Categories:** Uses `flex-wrap: wrap` to allow category items to wrap into new rows as needed, maintaining a flexible, grid-like layout.
5. **Promo Banner:** Stretches to full width (`width: 100%`) and is styled to stand out.
6. **Footer:** A simple flex container for center-aligning content.
Result
- The header provides a clear, horizontally aligned area for navigation and branding.
- The main content area showcases product categories in a flexible grid that adapts to screen width.
- The promo banner is prominently displayed, attracting attention.
- The footer provides necessary site information in a concise format.
Conclusion
This layout demonstrates the power of Flexbox in building responsive, clean, and well-structured web pages for an eCommerce setting.
Flexbox’s ability to align and distribute space among items in a container makes it ideal for modern web design, especially for dynamic content like a retail website. Experimentation with these properties is key to mastering responsive web design.
Explaining CSS Flexbox with a Construction Scaffolding Analogy
The Concept of Scaffolding in Construction
Imagine a construction site where workers are repairing the exterior of a building.
They use scaffolding—a temporary structure made of metal pipes and platforms.
This scaffolding provides flexibility in positioning workers and tools at various heights and locations along the building's exterior. It can be adjusted, extended, or retracted based on the needs of the construction project.
Flex Container: The Framework of Scaffolding
- **Flex Container as Scaffolding Structure:** In CSS Flexbox, the flex container can be likened to the entire scaffolding structure.
Just as scaffolding defines the work area for construction, the flex container establishes the space where the flex items (the construction workers and tools) will be positioned.
- **Adaptability:** Like scaffolding that can be extended horizontally or vertically, the flex container can adjust its layout along the main axis (horizontal or vertical) using the `flex-direction` property.
Flex Items: Construction Workers and Tools
- **Flex Items as Workers and Tools:** Flex items are similar to workers and tools on the scaffolding.
In a flex container, these items can be positioned, aligned, and distributed just like how workers and tools are arranged on the scaffolding.
- **Repositioning and Resizing:** Workers and tools on scaffolding can be moved closer together, spread apart, or arranged in order of importance. Similarly, flex items can be resized (using `flex-grow` and `flex-shrink`) and positioned (using `justify-content` and `align-items`) within the container.
Flexibility and Responsiveness
- **Adjustable Scaffolding:** Scaffolding can be reconfigured for different buildings or parts of a building. In Flexbox, this is akin to the responsiveness of the layout. Flex items can wrap or adjust based on the size of the container or viewport, similar to how scaffolding can be adjusted to fit different areas of a building.
- **Alignment and Distribution:** Just as scaffolding allows workers to be positioned at optimal points for specific tasks, Flexbox allows for precise alignment (vertically or horizontally) and distribution of space around flex items. This is achieved through properties like `align-self` and `justify-content`.
Ease of Construction
- **Streamlined Workflow:** Scaffolding provides a system that simplifies the construction process. Workers have easy access to tools and areas of the building. In web design, Flexbox offers a streamlined approach to layout design, making it easier to create complex designs with less CSS.
Conclusion
The scaffolding analogy aptly describes how CSS Flexbox works. It provides a flexible, adaptable, and efficient way to arrange elements (workers/tools) within a defined space (scaffolding structure/container). Just as scaffolding is crucial for efficient construction, Flexbox is essential for creating responsive and dynamic layouts in web design. Flexbox's ability to adjust, align, and distribute elements mirrors the flexibility and adaptability of construction scaffolding in the real world.
Lecture: Integrating CSS Selectors with Flexbox
Learing outcomes:
Explore the synergy between CSS selectors and Flexbox - a powerful combination that can significantly enhance your web designs.
Understanding how selectors work with Flexbox will enable you to create more dynamic, responsive, and efficient layouts.
CSS Selectors: The Backbone of Styling
Before we dive into Flexbox, let's briefly recap CSS selectors. Selectors are patterns used to select the elements you want to style. There are several types, including:
1. **Type Selectors:** Target elements by their HTML tag, like `div`, `p`, or `h1`.
2. **Class Selectors:** Target elements with a specific class attribute, prefixed with a dot, like `.classname`.
3. **ID Selectors:** Target a unique element with a specific ID, prefixed with a hash, like `#idname`.
4. **Attribute Selectors:** Target elements based on an attribute and its value, like `[type="text"]`.
5. **Pseudo-class Selectors:** Target elements in a specific state, like `:hover` or `:active`.
Flexbox: A Quick Overview
Flexbox is a CSS layout model that allows you to design complex layouts easily.
It's great for aligning items, distributing space, and handling dynamic content and sizes.
Applying Selectors in Flexbox Context
Selectors play a crucial role in effectively using Flexbox.
They enable you to target specific elements within a Flex container or items and apply Flexbox properties to them.
1. **Styling Flex Containers:** Use type, class, or ID selectors to style the Flex container.
```css
.flex-container {
display: flex;
justify-content: space-around;
}
```
2. **Targeting Flex Items:** Apply styles to flex items within the container.
```css
.flex-container > div {
flex-grow: 1;
}
```
3. **Responsive Design:** Combine selectors with media queries to make Flexbox layouts responsive.
```css
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
```
4. **Pseudo-classes for Interactive Design:** Use pseudo-classes to change the flex item's style on specific actions.
```css
.flex-item:hover {
background-color: lightblue;
}
```
Practical Applications
- **Navigation Bars:** Create a responsive navigation bar by styling `ul` and `li` tags within a Flex container.
- **Photo Galleries:** Align images using Flexbox, applying styles to each image (flex item) for consistent spacing and alignment.
- **Forms:** Design a form layout where labels and input fields are flex items, allowing for a clean, aligned presentation.
- **Grid Layouts:** Use Flexbox to create grid layouts, using selectors to style rows and columns.
Best Practices
- **Combine Flexbox with CSS Grid:**
For complex layouts, consider using Flexbox for smaller components and CSS Grid for overall page layout.
- **Consistency:** Use class selectors for styling flex items to maintain consistency and reusability.
- **Avoid Over Specificity:** While ID selectors are powerful, they can lead to overly specific rules. Use them judiciously.
Conclusion
Combining CSS selectors with Flexbox opens up a world of possibilities for web layout design. It allows you to build responsive, adaptable, and visually appealing web pages. Remember, practice is key to mastering these concepts, so I encourage you to experiment with different selectors and Flexbox properties in your projects.
Next Steps
In our next sessions, we will delve deeper into complex Flexbox layouts and explore real-world examples to enhance your understanding and skills in web design. Stay tuned!
Example: Social Media Website Using CSS Selectors and Flexbox
Objective
Create a layout for a simplified social media website using a combination of CSS selectors and Flexbox.
This example will illustrate how these tools can be effectively integrated to create a responsive, user-friendly interface.
Scenario: The social media site layout will include:
- A top navigation bar with the site logo and primary links.
- A main content area showcasing user posts.
- A sidebar for user profiles and additional links.
- A footer for miscellaneous site information.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Social Media Flexbox Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="top-nav">
<div class="logo">SocialSite</div>
<nav>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Notifications</a></li>
</ul>
</nav>
</header>
<div class="content-container">
<main class="main-content">
<article class="post">Post 1</article>
<article class="post">Post 2</article>
<article class="post">Post 3</article>
<!-- Additional posts... -->
</main>
<aside class="sidebar">
<section class="profile">User Profile</section>
<section class="links">Additional Links</section>
</aside>
</div>
<footer class="site-footer">
<p>© 2024 SocialSite. All rights reserved.</p>
</footer>
</body>
</html>
```
CSS with Flexbox and Selectors
styles.css
```css
body {
margin: 0;
font-family: 'Arial', sans-serif;
}
/* Top Navigation Bar */
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: white;
}
.top-nav .logo {
font-size: 24px;
}
.top-nav .nav-links {
list-style-type: none;
display: flex;
padding: 0;
}
.top-nav .nav-links li {
margin-left: 20px;
}
.top-nav .nav-links li a {
color: white;
text-decoration: none;
}
/* Content Container with Flexbox */
.content-container {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.main-content {
flex: 1;
min-width: 300px;
}
.sidebar {
flex-basis: 200px;
}
.post {
background-color: #f4f4f4;
border: 1px solid #ddd;
margin-bottom: 10px;
padding: 10px;
}
/* Footer */
.site-footer {
padding: 10px 20px;
background-color: #333;
color: white;
text-align: center;
}
```
Explanation
- **Top Navigation Bar:** Uses Flexbox for horizontal alignment of the logo and navigation links. The `.nav-links` class, applied to the `ul` element, styles the navigation links horizontally.
- **Content Container:** The `content-container` class creates a flex container that holds the main content and sidebar. `flex-wrap: wrap;` allows the sidebar to stack below the main content on smaller screens.
- **Main Content and Sidebar:** The `.main-content` and `.sidebar` classes are flex items. `flex: 1;` on `.main-content` allows it to grow and take available space, while `.sidebar` has a fixed width (`flex-basis`).
- **Posts:** Each post (`article` element with class `.post`) is styled individually, demonstrating the use of class selectors within a flex container.
- **Footer:** A simple flex container to center the content.
#### Result
This layout provides a clear, organized structure typical of social media platforms. The top navigation bar is responsive and user-friendly, the main content and sidebar are well-aligned and adapt to screen size changes, and the footer neatly concludes the page.
#### Conclusion
This example showcases how combining CSS selectors with Flexbox can create efficient, responsive layouts suitable for complex web applications like social media sites. The use of class selectors within a Flexbox context allows for precise styling and layout control, essential for modern web design.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.