CSS Flexbox

CSS Flexbox (Flexible Box Layout) is a powerful layout module designed to help you align and distribute space among items in a container, even when their size is unknown or dynamic. Here, we'll understand the parent and child properties used with Flexbox, which control the behavior of the flex container and its direct children (flex items).

Parent Flexbox:

1. display: flex

The display: flex property transforms an element into a flex container, allowing its children to become flex items. This initiates the Flexbox layout model.

.container {
    display: flex;
}

2. flex-direction

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

• row: The flex container's main axis is horizontal. Flex items are placed in the same direction as text (left-to-right).

.container {
    flex-direction: row;
}

• row-reverse: The main axis is horizontal, but the flex items are placed in the reverse order (right-to-left).

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

• column: The main axis is vertical. Flex items are placed top-to-bottom.

.container {
    flex-direction: column;
}

• column-reverse: The main axis is vertical, but the flex items are placed in the reverse order (bottom-to-top).

.container {
    flex-direction: column-reverse;
}

3. flex-wrap

The flex-wrap property specifies whether the flex items should wrap onto multiple lines or stay in a single line.

• nowrap: All flex items will be placed in a single line (default).

.container {
    flex-wrap: nowrap;
}

• wrap: Flex items will wrap onto multiple lines from top to bottom.

.container {
    flex-wrap: wrap;
}

• wrap-reverse: Flex items will wrap onto multiple lines from bottom to top.

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

4. flex-flow

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

.container {
    flex-flow: <flex-direction> <flex-wrap>;
}

example:

/* Equivalent to flex-direction: row; flex-wrap: wrap; */
.container1 {
    flex-flow: row wrap;
}

/* Equivalent to flex-direction: column; flex-wrap: nowrap; */
.container2 {
    flex-flow: column nowrap;
}

5. justify-content

The justify-content property aligns flex items along the main axis of the flex container.

• flex-start: Aligns flex items at the start of the main axis (default).

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

• flex-end: Aligns flex items at the end of the main axis.

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

• center: Aligns flex items at the center of the main axis (most commonly used).

.container {
    justify-content: center;
}

• space-between: Distributes flex items with equal space between them.

.container {
    justify-content: space-between;
}

• space-around: Distributes flex items with equal space around them.

.container {
    justify-content: space-around;
}

• space-evenly: Distributes flex items with equal space between and around them.

.container {
    justify-content: space-evenly;
}

6. align-items

The align-items property aligns flex items along the cross axis of the flex container.

• stretch: Stretches flex items to fill the container (default).

.container {
    align-items: stretch;
}

• flex-start: Aligns flex items at the start of the cross axis.

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

• flex-end: Aligns flex items at the end of the cross axis.

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

• center: Aligns flex items at the center of the cross axis (most commonly used).

.container {
    align-items: center;
}

• baseline: Aligns flex items such that their baselines align.

.container {
    align-items: baseline;
}

7. align-content

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

flex-start: Packs flex lines at the start of the container.

.container {
    align-content: flex-start;
}

• flex-end: Packs flex lines at the end of the container.

.container {
    align-content: flex-end;
}

center: Packs flex lines at the center of the container.

.container {
    align-content: center;
}

• space-between: Distributes flex lines with equal space between them.

.container {
    align-content: space-between;
}

• space-around: Distributes flex lines with equal space around them.

.container {
    align-content: space-around;
}

• space-evenly: Distributes flex lines with equal space between and around them.

.container {
    align-content: space-evenly;
}

• stretch: Stretches flex lines to fill the remaining space (default).

.container {
    align-content: stretch;
}

Here's an example while using these parent properties:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
</head>
<body>
    <div class="container">
        <div class="item"><p>1</p></div>
        <div class="item"><p>2</p></div>
        <div class="item"><p>3</p></div>
        <div class="item"><p>4</p></div>
        <div class="item"><p>5</p></div>
        <div class="item"><p>5</p></div>
    </div>
</body>
</html>

.container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            align-content: space-around;
            height: 300px;
            border: 2px solid black;
        }

.item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
/* .item has become a parent as well since it has a <p> element inside it. */

Explanation of the code:

• The .container element is a flex container with a row direction, allowing items to wrap, and uses various alignment properties to distribute the flex items and lines.

• Each .item is a flex item with a fixed width and height, centered within the flex container.

All of these properties explained so far are used on parents, which you will be wrapping your child (content) into.

Child Flexbox:

1. order

The order property defines the order in which flex items are laid out in the flex container. The default value is 0, and items are laid out according to their source order. Changing the order value affects the visual order but not the document's logical order.

.item1 {
    order: 2;
}

.item2 {
    order: 1;
}

.item3 {
    order: 3;
}

In this example, .item1 will take place on 2nd, .item2 on 1st and .item3 on 3rd (as it was since the starting).

2. flex-grow

The flex-grow property defines the ability of a flex item to grow if necessary. It accepts a unit-less value that serves as a proportion. It specifies how much of the available space inside the flex container the item should take up, relative to the other flex items.

.item1 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

.item3 {
    flex-grow: 1;
}

In this example, .item2 will grow to take twice the space compared to .item1 and .item3.

3. flex-shrink

The flex-shrink property defines the ability of a flex item to shrink if necessary. It accepts a unit-less value that serves as a proportion. It specifies how much the flex item will shrink relative to the other flex items when there isn't enough space in the container.

.item1 {
    flex-shrink: 1;
}

.item2 {
    flex-shrink: 2;
}

.item3 {
    flex-shrink: 1;
}

In this example, .item2 will shrink twice as much as .item1 and .item3 when space is limited.

4. flex-basis

The flex-basis property defines the initial main size of a flex item. It sets the base size before any space distribution happens according to flex-grow and flex-shrink.

.item1 {
    flex-basis: 200px;
}

.item2 {
    flex-basis: 150px;
}

.item3 {
    flex-basis: 100px;
}

In this example, the initial size of .item1 will be 200px, .item2 will be 150px, and .item3 will be 100px.

5. flex

The flex property is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties. It is the preferred way to set these values together.

/* Usage */
.item {
    flex: <flex-grow> <flex-shrink> <flex-basis>;
}

.item1 {
    flex: 1 1 200px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}

.item2 {
    flex: 2 1 150px; /* flex-grow: 2; flex-shrink: 1; flex-basis: 150px; */
}

.item3 {
    flex: 1 1 100px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 100px; */
}

6. align-self

The align-self property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. This property accepts the same values as align-items.

• auto: Inherits the value of align-items from the flex container (default).

• flex-start: Aligns the item at the start of the cross axis.

• flex-end: Aligns the item at the end of the cross axis.

• center: Centers the item along the cross axis.

• baseline: Aligns the item such that its baseline aligns with the baseline of the other items.

• stretch: Stretches the item to fill the container (default for align-items).

.item1 {
    align-self: flex-start;
}

.item2 {
    align-self: center;
}

.item3 {
    align-self: flex-end;
}

Here's an example while using these child properties:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Child Properties Example</title>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

.container {
            display: flex;
            height: 300px;
            border: 2px solid black;
        }

.item1 {
            order: 3;
            flex: 1 1 200px;
            align-self: flex-start;
            background-color: lightblue;
        }

.item2 {
            order: 1;
            flex: 2 1 150px;
            align-self: center;
            background-color: lightcoral;
        }

.item3 {
            order: 2;
            flex: 1 2 100px;
            align-self: flex-end;
            background-color: lightgreen;
        }

Explanation of the code:

• order: Item 2 is displayed first, followed by Item 3, and then Item 1.

• flex-grow: Item 2 grows twice as much as Item 1 and Item 3.

• flex-shrink: Item 3 shrinks twice as much as Item 1 and Item 2 when space is limited.

• flex-basis: Initial sizes are set to 200px, 150px, and 100px, respectively.

• align-self: Item 1 aligns to the start of the cross axis, Item 2 to the center, and Item 3 to the end.

All of these properties explained above are used on child, not on the parent that you will be wrapping your content (child) into.