CSS Flexbox Deep Dive

Lecture 8: Mastering CSS Flexbox - A Deep Dive

In this lecture, we’ll dive deeper into CSS Flexbox, a powerful layout tool that helps you design responsive and flexible layouts. You’ll learn how to use Flexbox to align, distribute, and order elements efficiently, making your design more adaptive across devices.

What is Flexbox?

Flexbox, short for "Flexible Box Layout," is a CSS layout module that makes it easier to design layouts that can adjust to different screen sizes. It allows the arrangement of items in a container to be flexible, aligning them dynamically based on the available space.

1. Flexbox Terminology

Before we start using Flexbox, let's understand its main components:

• Flex Container: The parent element that holds flex items.
• Flex Items: The child elements inside the flex container.

You enable Flexbox by setting display: flex on the container.

• Example:

  .flex-container {
    display: flex;
  }

Now, the child elements inside .flex-container will behave according to the Flexbox rules.

2. Flex Direction

flex-direction controls the direction in which flex items are placed in the container. By default, items are placed in a row.

• Values:

  • row: Items are arranged horizontally (default).
  • row-reverse: Items are arranged horizontally but in reverse order.
  • column: Items are arranged vertically.
  • column-reverse: Items are arranged vertically in reverse order.

• Example:
  
  

  .flex-container {
    display: flex;
    flex-direction: row; /* You can change to column */
  }

3. Justify Content

justify-content is used to align flex items along the main axis (horizontal if flex-direction: row; vertical if flex-direction: column).

• Values:

  • flex-start: Aligns items to the start.
  • flex-end: Aligns items to the end.
  • center: Centers items.
  • space-between: Spreads items, with the first item at the start and the last at the end.
  • space-around: Adds equal space around each item.

• Example:
  
  

  .flex-container {
    justify-content: center;
  }

In this example, the items inside the flex container will be centered.

4. Align Items

align-items aligns flex items along the cross axis (perpendicular to the main axis).

• Values:

  • stretch: Stretches items to fill the container (default).
  • flex-start: Aligns items to the start of the cross axis.
  • flex-end: Aligns items to the end of the cross axis.
  • center: Centers items along the cross axis.

• Example:
  
  

  .flex-container {
    align-items: center;
  }

5. Flex Wrap

By default, flex items are placed on one line, and the content may shrink to fit. flex-wrap allows flex items to wrap onto multiple lines if necessary.

• Values:

  • nowrap: Items stay on one line (default).
  • wrap: Items wrap onto multiple lines.
  • wrap-reverse: Items wrap onto multiple lines, but in reverse order.

• Example:
  
  

  .flex-container {
    flex-wrap: wrap;
  }

6. Align Content

align-content aligns multiple rows of flex items along the cross axis. It’s used when the container has extra space in the cross axis, and there are multiple rows of flex items.

• Values:

  • flex-start: Packs lines toward the start.
  • flex-end: Packs lines toward the end.
  • center: Packs lines toward the center.
  • space-between: Distributes lines evenly with space between them.
  • space-around: Distributes lines evenly with space around them.
  • stretch: Stretches lines to take up the available space.

• Example:
  
  

  .flex-container {
    align-content: space-between;
  }

Practical Example: Creating a Responsive Photo Gallery

Let’s create a responsive photo gallery using Flexbox.

HTML:

<div class="gallery">
  <div class="gallery-item">Image 1</div>
  <div class="gallery-item">Image 2</div>
  <div class="gallery-item">Image 3</div>
  <div class="gallery-item">Image 4</div>
  <div class="gallery-item">Image 5</div>
</div>

CSS:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
  padding: 20px;
}

.gallery-item {
  flex-basis: calc(25% - 20px); /* Four items per row */
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .gallery-item {
    flex-basis: calc(50% - 20px); /* Two items per row on smaller screens */
  }
}

In this example:

• The .gallery container uses Flexbox to wrap the items and spread them evenly.
• Each .gallery-item takes up 25% of the container width, minus the gap.
• On smaller screens (below 768px), the items adjust to 50% width for better readability.

Responsive Design with Flexbox

Flexbox is a powerful tool for responsive design. You can easily adjust the layout by changing flex properties based on the screen size using media queries.

• Example:

  @media screen and (max-width: 600px) {
    .gallery-item {
      flex-basis: 100%; /* Items take up full width on small screens */
    }
  }

With this media query, on screens smaller than 600px, each gallery item will take up the full width of the container.

Practice Exercises

1. Create a navigation bar using Flexbox, with the logo on the left and the links on the right.
2. Create a three-column layout that wraps into one column on smaller screens.
3. Use justify-content and align-items to create different layouts, like a centered section or a footer with evenly spaced links.

Next Up: In the next lecture, we’ll explore CSS Grid - A Deep Dive, where you’ll learn about CSS Grid and how it compares to Flexbox for building complex layouts. Stay tuned!

follow me on LinkedIn-

Ridoy Hasan