CSS Flex Container

In CSS, a flex container is the element that holds the flex items. It is the key to enabling the flexible layout of the items inside it. By turning a container into a flex container, we unlock a variety of layout properties that help control the alignment, order, and size of its child elements (the flex items).

How to Create a Flex Container

To create a flex container, simply apply the display: flex property to the parent container element. This tells the browser to treat all direct children of the container as flex items.

Example:

<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>

CSS:

.flex-container {
    display: flex;
    background-color: lightgray;
    padding: 10px;
}

.flex-item {
    background-color: cornflowerblue;
    color: white;
    padding: 20px;
    margin: 5px;
    text-align: center;
}

In the example above, the parent <div class="flex-container"> is now a flex container, and its child elements (the items with the class .flex-item) are treated as flex items.

Flex Container Properties

A flex container can control the layout of its child elements using several key properties. These properties allow for flexible, responsive layouts that adapt to various screen sizes.

1. display: flex

The display: flex property defines the container as a flex container. All its immediate children become flex items.

.flex-container {
    display: flex;
}

2. flex-direction

The flex-direction property determines the direction in which flex items are placed within the container. This property can take the following values:

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

Example:

.flex-container {
    display: flex;
    flex-direction: row; /* Horizontal layout */
}

3. flex-wrap

By default, flex items are placed in a single row (or column), and they will overflow if there isn’t enough space. The flex-wrap property allows the flex items to wrap onto multiple lines if necessary.

  • nowrap: Items stay in one line, even if they overflow (default).
  • wrap: Items wrap to the next line.
  • wrap-reverse: Items wrap to the next line in reverse order.

Example:

.flex-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto the next line */
}

4. justify-content

The justify-content property aligns the flex items along the main axis (horizontal by default). It controls the space between the items and how they are distributed within the container.

Values:

  • flex-start: Items align at the start (default).
  • flex-end: Items align at the end.
  • center: Items align in the center.
  • space-between: Equal space between items.
  • space-around: Equal space around items.
  • space-evenly: Equal space between and around items.

Example:

.flex-container {
    display: flex;
    justify-content: space-between; /* Space items evenly across the container */
}

5. align-items

The align-items property aligns the flex items along the cross axis (vertical by default). It controls how the items are distributed in the container, relative to each other.

Values:

  • flex-start: Align items at the start of the cross axis.
  • flex-end: Align items at the end of the cross axis.
  • center: Align items at the center of the cross axis.
  • baseline: Align items along their baseline (if they have text).
  • stretch: Stretch items to fill the container (default).

Example:

.flex-container {
    display: flex;
    align-items: center; /* Align items vertically in the center */
}

6. align-content

The align-content property is used when there are multiple lines of flex items (i.e., when flex-wrap: wrap is used). It aligns the entire group of lines within the container.

Values:

  • flex-start: Lines align at the start.
  • flex-end: Lines align at the end.
  • center: Lines align in the center.
  • space-between: Equal space between lines.
  • space-around: Equal space around lines.
  • stretch: Lines stretch to fill the container.

Example:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between; /* Space out multiple lines of items */
}

7. gap

The gap property (formerly grid-gap) defines the space between flex items in both directions. It’s similar to margin, but specifically for the space between items in a flex layout.

Example:

.flex-container {
    display: flex;
    gap: 10px; /* 10px gap between flex items */
}

Practical Examples

Example 1: Flex Container with Horizontal Layout

<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>
.flex-container {
    display: flex;
    justify-content: space-between; /* Distribute items with equal space */
    padding: 10px;
}

.flex-item {
    background-color: lightcoral;
    padding: 20px;
    color: white;
    text-align: center;
}

Example 2: Flex Container with Vertical Layout

<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>
.flex-container {
    display: flex;
    flex-direction: column; /* Arrange items vertically */
    justify-content: space-between; /* Distribute items vertically */
    height: 300px;
    padding: 10px;
}

.flex-item {
    background-color: lightblue;
    padding: 20px;
    color: white;
    text-align: center;
}

Conclusion

The flex container is a powerful tool for creating flexible and responsive layouts. By understanding and utilizing properties like display, flex-direction, justify-content, and align-items, you can create dynamic, adaptable designs that respond effectively to different screen sizes and content types.

For more tutorials on CSS and web development, check out The Coding College!

Leave a Comment