9.1 CSS Flexbox & Responsive Design

Lesson 5: CSS Flexbox & Responsive Design

Objective:

Learn to create flexible layouts using Flexbox and media queries for responsive design.

1. Introduction to Flexbox

Flex Container

• Flex Containers and Flex Items: A flex container is an element that enables Flexbox layout, and its direct children are considered flex items. To start using Flexbox, define a container as a flex container:

  .flex-container {
    display: flex;
  }

• Key Flexbox Properties:

  • flex-direction: Defines the direction of the flex items within the container. Values include row (default), column, row-reverse, and column-reverse.

    .flex-container {
      flex-direction: row;
    }

  • justify-content: Controls how flex items are distributed along the main axis (horizontal or vertical depending on flex-direction). Common values: flex-start, flex-end, center, space-between, space-around.

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

  • align-items: Aligns flex items along the cross axis (perpendicular to the main axis). Common values: flex-start, flex-end, center, stretch.

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

  • flex-wrap: Controls whether flex items wrap onto multiple lines. By default, flex items are on a single line (nowrap), but this can be set to wrap for multi-line layouts.

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

  • flexbox display: the display value`flex`defines the container as a block element, however, the value `inline-flex`defines the element as inline element.

  • .inline-flex-container {
      display: inline-flex;
    }

1. Building a Flexbox Layout

• Creating a Basic Responsive Layout Using Flexbox: To demonstrate Flexbox, let’s create a simple layout with three columns that adjust according to screen size.

// CSS3 : flex container
<div class="flex-container">
  <div class="box">Column 1</div>
  <div class="box">Column 2</div>
  <div class="box">Column 3</div>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.flex-item {
  width: 33%;
  text-align:center;
  font-size: 1.1em;
  padding: 1.5em;
  margin: 10px;
  color: white;
}
 .color1 {background-color: #675BA7;}
 .color2 {background-color: #9BC850;}
 .color3 {background-color: #A62E5C;}
.flex-box {
  width: 30%;
  padding: 1.5em;
  background-color: #f4f4f4;
  margin: 10px;
  text-align: center;
  display: flex;
}

• Understanding Alignment and Spacing with Flexbox: By adjusting justify-content and align-items, you can control the horizontal and vertical alignment of flex items within the container.

1. Responsive Design with Media Queries

• Using Media Queries to Create Responsive Designs: Media queries allow you to apply different styles based on the viewport size (or other characteristics). For example, you can adjust the layout for screens narrower than 600px:

  @media screen and (max-width: 600px) {
    .flex-box {
      width: 100%;
      flex-direction: column;
    }
  }

1. Combining Flexbox and Media Queries

• Creating a Mobile-First Design with Flexbox and Media Queries: In a mobile-first approach, you design for smaller screens first and then progressively enhance the layout for larger screens using media queries.

  .flex-container {
    display: flex;
    flex-direction: column;
  }
  
  @media screen and (min-width: 768px) {
    .flex-container {
      flex-direction: row;
    }
  }