The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Flex Container Properties

Next ►
►

In this lesson, we will dive into the properties that can be applied to a flex container. Understanding these properties is crucial for mastering Flexbox and creating flexible, responsive layouts.

Key Concepts

  1. Flex Container: The parent element that contains flex items.
  2. Flex Items: The child elements within a flex container.

Flex Container Properties

  1. display: flex;

To create a flex container, you need to set the display property of the parent element to flex or inline-flex.

.container {
  display: flex;
}

  1. flex-direction

The flex-direction property defines the direction in which the flex items are placed in the flex container.

  • row (default): Items are placed in a row, from left to right.
  • row-reverse: Items are placed in a row, from right to left.
  • column: Items are placed in a column, from top to bottom.
  • column-reverse: Items are placed in a column, from bottom to top.
.container {
  display: flex;
  flex-direction: row; /* or row-reverse, column, column-reverse */
}

  1. flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not when they overflow the container.

  • nowrap (default): All flex items will be on one line.
  • wrap: Flex items will wrap onto multiple lines, from top to bottom.
  • wrap-reverse: Flex items will wrap onto multiple lines, from bottom to top.
.container {
  display: flex;
  flex-wrap: wrap; /* or nowrap, wrap-reverse */
}

  1. flex-flow

The flex-flow property is a shorthand for setting both flex-direction and flex-wrap.

.container {
  display: flex;
  flex-flow: row wrap; /* flex-direction and flex-wrap */
}

  1. justify-content

The justify-content property aligns the flex items along the main axis (horizontally for row and row-reverse, vertically for column and column-reverse).

  • flex-start (default): Items are packed toward the start of the flex container.
  • flex-end: Items are packed toward the end of the flex container.
  • center: Items are centered along the main axis.
  • space-between: Items are evenly distributed with the first item at the start and the last item at the end.
  • space-around: Items are evenly distributed with equal space around them.
  • space-evenly: Items are evenly distributed with equal space between them.
.container {
  display: flex;
  justify-content: center; /* or flex-start, flex-end, space-between, space-around, space-evenly */
}

  1. align-items

The align-items property aligns the flex items along the cross axis (vertically for row and row-reverse, horizontally for column and column-reverse).

  • stretch (default): Items are stretched to fill the container.
  • flex-start: Items are aligned toward the start of the cross axis.
  • flex-end: Items are aligned toward the end of the cross axis.
  • center: Items are centered along the cross axis.
  • baseline: Items are aligned such that their baselines align.
.container {
  display: flex;
  align-items: center; /* or stretch, flex-start, flex-end, baseline */
}

  1. align-content

The align-content property aligns the flex lines when there is extra space in the cross axis. This property has no effect when there is only one line of flex items.

  • stretch (default): Lines stretch to take up the remaining space.
  • flex-start: Lines are packed toward the start of the container.
  • flex-end: Lines are packed toward the end of the container.
  • center: Lines are centered in the container.
  • space-between: Lines are evenly distributed with the first line at the start and the last line at the end.
  • space-around: Lines are evenly distributed with equal space around them.
  • space-evenly: Lines are evenly distributed with equal space between them.
.container {
  display: flex;
  align-content: space-between; /* or stretch, flex-start, flex-end, center, space-around, space-evenly */
}

Practical Example

Let's create a practical example to see these properties in action.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Container Properties</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      align-content: space-between;
      height: 300px;
      border: 2px solid #000;
    }
    .item {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

Explanation

  • The .container class is set to display: flex; to make it a flex container.
  • flex-direction: row; arranges the items in a row.
  • flex-wrap: wrap; allows the items to wrap onto multiple lines.
  • justify-content: space-around; evenly distributes the items with equal space around them.
  • align-items: center; centers the items along the cross axis.
  • align-content: space-between; evenly distributes the lines with the first line at the start and the last line at the end.

Exercises

Exercise 1

Create a flex container with the following properties:

  • flex-direction: column;
  • justify-content: center;
  • align-items: flex-start;

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 1</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      height: 300px;
      border: 2px solid #000;
    }
    .item {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Exercise 2

Create a flex container with the following properties:

  • flex-direction: row-reverse;
  • flex-wrap: wrap-reverse;
  • justify-content: space-between;
  • align-items: baseline;

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 2</title>
  <style>
    .container {
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap-reverse;
      justify-content: space-between;
      align-items: baseline;
      height: 300px;
      border: 2px solid #000;
    }
    .item {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

Conclusion

In this lesson, we covered the essential properties of a flex container, including flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content. Understanding these properties will help you create flexible and responsive layouts using Flexbox. In the next lesson, we will explore the properties that can be applied to flex items.

◄ Previous
◄
Next ►
►

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved