What is a Flex Box?

Part of the Styling with CSS section of Coddy's HTML journey — lesson 44 of 76.

In CSS, the Flexbox layout is a powerful tool that provides an efficient way to align and distribute space among items in a container. With Flexbox, you can control the alignment, direction, order, and size of elements within a container, creating flexible and dynamic layouts that adapt to different screen sizes and devices.

To use Flexbox, you first need to define a flex container. This is done by setting the display property of an element to flex or inline-flex. Once you've created a flex container, its direct children automatically become flex items.

Here's the basic syntax for creating a flex container:

.container {
    display: flex;
}

display: flex;: This declaration turns the selected element into a flex container and its direct children into flex items.

Once you have a flex container, you can use various Flexbox properties to control the layout of its flex items. Some of the most commonly used properties include:

flex-direction: Specifies the direction of the flex items (row, column, row-reverse, column-reverse).
justify-content: Aligns the flex items along the main axis (e.g., flex-start, flex-end, center, space-between, space-around).

align-items: Aligns the flex items along the cross axis (e.g., flex-start, flex-end, center, baseline, stretch).
flex-wrap: Controls whether the flex items should wrap onto multiple lines (wrap, nowrap, wrap-reverse).
align-content: Aligns the flex lines when there is extra space in the cross axis (similar to justify-content but for multiple lines).

Challenge

Easy

You are given an HTML document with a division (<div>) that contains three child divisions (<div>). Your task is to use the display: flex; property to turn the parent division into a flex container. Follow the steps below:

Write a CSS rule that targets the <div> element with the class container.
Set the display property of the .container element to flex.

Cheat sheet

To create a flex container, set the display property to flex:

.container {
    display: flex;
}

This turns the element into a flex container and its direct children into flex items.

Common Flexbox properties for controlling layout:

flex-direction: Direction of flex items (row, column, row-reverse, column-reverse)
justify-content: Aligns items along main axis (flex-start, flex-end, center, space-between, space-around)
align-items: Aligns items along cross axis (flex-start, flex-end, center, baseline, stretch)
flex-wrap: Controls wrapping (wrap, nowrap, wrap-reverse)
align-content: Aligns flex lines when there's extra space in cross axis

Try it yourself

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>