Prev Next

CSS Flex Container

The flex container is the parent element in a Flexbox layout. It controls the layout and behavior of its child elements (flex items) using specific properties such as flex-direction, justify-content, align-items, and more.

Key Topics

Flex Direction

The flex-direction property defines the direction of the main axis along which the flex items are placed.

<style>
        .flex-row {
            display: flex;
            flex-direction: row;
        }
        .flex-column {
            display: flex;
            flex-direction: column;
        }
        .flex-item {
            background-color: #007BFF;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
</style>
<div class="flex-row">
    <div class="flex-item">Row Item 1</div>
    <div class="flex-item">Row Item 2</div>
    <div class="flex-item">Row Item 3</div>
</div>
<div class="flex-column">
    <div class="flex-item">Column Item 1</div>
    <div class="flex-item">Column Item 2</div>
    <div class="flex-item">Column Item 3</div>
</div>

Explanation: The flex-direction: row; arranges items in a horizontal line, while flex-direction: column; stacks them vertically.

Justify Content

The justify-content property aligns items along the main axis (horizontal or vertical, depending on flex-direction).

<style>
        .justify-center {
            display: flex;
            justify-content: center;
        }
        .justify-space-between {
            display: flex;
            justify-content: space-between;
        }
        .flex-item {
            background-color: #007BFF;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
</style>
<div class="justify-center">
    <div class="flex-item">Center 1</div>
    <div class="flex-item">Center 2</div>
</div>
<div class="justify-space-between">
    <div class="flex-item">Space 1</div>
    <div class="flex-item">Space 2</div>
</div>

Explanation: The justify-content property positions items centrally or distributes them evenly along the main axis.

Align Items

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

<style>
        .align-center {
            display: flex;
            align-items: center;
            height: 200px;
        }
        .align-flex-end {
            display: flex;
            align-items: flex-end;
            height: 200px;
        }
        .flex-item {
            background-color: #007BFF;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
</style>
<div class="align-center">
    <div class="flex-item">Aligned Center</div>
    <div class="flex-item">Aligned Center</div>
</div>
<div class="align-flex-end">
    <div class="flex-item">Aligned End</div>
    <div class="flex-item">Aligned End</div>
</div>

Explanation: Items are aligned centrally or to the end of the cross axis using align-items.

Flex Wrap

The flex-wrap property specifies whether items should wrap onto multiple lines when there is insufficient space in the container.

<style>
        .wrap {
            display: flex;
            flex-wrap: wrap;
        }
        .nowrap {
            display: flex;
            flex-wrap: nowrap;
        }
        .flex-item {
            background-color: #007BFF;
            color: white;
            margin: 5px;
            padding: 20px;
            width: 150px;
            text-align: center;
        }
</style>
<div class="wrap">
    <div class="flex-item">Wrap 1</div>
    <div class="flex-item">Wrap 2</div>
    <div class="flex-item">Wrap 3</div>
</div>
<div class="nowrap">
    <div class="flex-item">No Wrap 1</div>
    <div class="flex-item">No Wrap 2</div>
    <div class="flex-item">No Wrap 3</div>
</div>

Explanation: Flex items wrap onto a new line when flex-wrap: wrap; is set, or they remain on one line with flex-wrap: nowrap;.

Key Takeaways

  • Flex Direction: Defines the main axis direction (row or column).
  • Justify Content: Aligns items along the main axis.
  • Align Items: Aligns items along the cross axis.
  • Flex Wrap: Controls whether items wrap onto multiple lines.
Prev Next