Lesson 10 - Flexbox

10.2 Advance Flexbox Styles

Mastering Advanced Flexbox Techniques

In this chapter, we delve deeper into Flexbox with advanced examples and techniques to harness its full potential.

1. Nested Flexboxes for Complex Structures

Leverage nested flex containers to create intricate layouts and hierarchical structures with ease:

<style>
  .outer-container {
    display: flex;
    justify-content: space-between;
  }
  .inner-container {
    display: flex;
    flex-direction: column;
  }
</style>

<div class="outer-container">
  <div class="inner-container">
    <div class="flex-item">Subitem 1</div>
    <div class="flex-item">Subitem 2</div>
  </div>
  <div class="inner-container">
    <div class="flex-item">Subitem 3</div>
    <div class="flex-item">Subitem 4</div>
  </div>
</div>

2. Advanced Flex Item Customization

Flex items inherit properties from their parent container and can be individually tailored for precise layout control:

<style>
  .flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f0f0f0;
    padding: 20px;
  }

  .flex-item {
    flex: 1 0 auto; /* Flex-grow, flex-shrink, flex-basis */
    align-self: center; /* Overrides align-items for specific item */
    margin: 10px;
    padding: 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
  }

  .flex-item:nth-child(odd) {
    background-color: #2ecc71;
  }
</style>

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

HTML Structure:

• <div class="flex-container">: This is the parent container that holds the flex items.
• <div class="flex-item">: These are the child elements inside the flex container that we want to customize using Flexbox.

CSS Styling:

1. .flex-container:

   • display: flex;: Turns the container into a flex container, enabling Flexbox properties.
   • justify-content: space-around;: Distributes items evenly with space around them along the main axis (horizontally in this case).
   • align-items: center;: Centers items along the cross axis (vertically in this case).
   • background-color: #f0f0f0;: Sets a light background color for the flex container.
   • padding: 20px;: Adds padding inside the flex container for spacing.

2. .flex-item:

   • flex: 1 0 auto;: Specifies the flex-grow, flex-shrink, and flex-basis properties. flex-grow: 1; allows the items to grow proportionally, flex-shrink: 0; prevents them from shrinking, and flex-basis: auto; allows them to grow based on their content.
   • align-self: center;: Overrides the align-items property of the flex container for the specific item, centering it vertically.
   • margin: 10px;: Adds margin around each flex item for spacing.
   • padding: 20px;: Adds padding inside each flex item for spacing.
   • background-color: #3498db;: Sets the background color of the flex items to a shade of blue.
   • color: white;: Sets the text color inside the flex items to white.
   • text-align: center;: Centers the text horizontally inside each flex item.

3. .flex-item:nth-child(odd):

   • Selects every odd-numbered flex item inside the flex container.
   • background-color: #2ecc71;: Sets a different background color (green) for odd-numbered flex items to create visual contrast.

Result:

This example creates a flex container with three flex items (Item 1, Item 2, Item 3). Each flex item is styled with Flexbox properties (flex, align-self) and CSS styling (background color, margin, padding) to demonstrate advanced customization techniques. The odd-numbered items have a green background color, while even-numbered items have a blue background color, showcasing how to apply different styles based on element order.

3. Responsive Design Strategies

Flexbox can be used to simplify responsive design by adapting layouts based on screen size and viewport dimensions:

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 0;
    background-color: #f0f0f0;
  }

  .grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    gap: 20px;
  }

  .grid-item {
    flex: 1 1 300px; /* Flex-grow, flex-shrink, flex-basis */
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
  }

  @media (max-width: 768px) {
    .grid-item {
      flex-basis: calc(20% - 20px);
    }
  }

  @media (max-width: 480px) {
    .grid-item {
      flex-basis: 100%;
    }
  }
</style>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

HTML Structure:

• <div class="grid-container">: This is the parent container that holds the grid items.
• <div class="grid-item">: These are the child elements inside the grid container that we want to arrange using Flexbox.

CSS Styling:

1. .grid-container:

   • display: flex;: Turns the container into a flex container, enabling Flexbox properties.
   • flex-wrap: wrap;: Allows items to wrap onto multiple lines when there isn't enough space.
   • justify-content: space-around;: Distributes items evenly with space around them along the main axis (horizontally in this case).
   • align-items: stretch;: Stretches items to fill the cross-axis (vertically in this case).
   • gap: 20px;: Adds a gap of 20px between grid items for spacing.

2. .grid-item:

   • flex: 1 1 300px;: Specifies the flex-grow, flex-shrink, and flex-basis properties. flex-grow: 1; allows the items to grow proportionally, flex-shrink: 1; allows them to shrink, and flex-basis: 300px; sets the initial size of the item.
   • background-color: #3498db;: Sets the background color of the grid items to a shade of blue.
   • color: white;: Sets the text color inside the grid items to white.
   • padding: 20px;: Adds padding inside each grid item for spacing.
   • text-align: center;: Centers the text horizontally inside each grid item.

3. Media Queries:

   • @media (max-width: 768px) adjusts the layout for screens smaller than 768px wide:
     • flex-basis: calc(20% - 20px); sets the flex basis to 20% minus the gap, creating a two-column layout.
   • @media (max-width: 480px) adjusts the layout for screens smaller than 480px wide:
     • flex-basis: 100%; sets the flex basis to 100%, creating a single-column layout.

Result:

This example creates a responsive grid layout using Flexbox. The grid container (grid-container) uses Flexbox properties to arrange grid items (grid-item) in a flexible grid structure with evenly spaced gaps between items. Media queries ensure the layout adjusts smoothly on different screen sizes, providing a responsive design for various devices.