Flexbox

Flexbox is a set of CSS declarations that allow us to more easily position elements on a web page and create flexible layouts. The idea for the Flexbox model appeared some time before 2008, and the first working draft was published on July 23, 2009. Over the following years, the Flexbox model was developed and adapted to the needs of designers and developers, until October 2017 when the last working draft of the Flexbox model was published.

Flexbox introduces new CSS properties that allow controlling the layout of elements in one dimension - along the main axis and across the cross axis. The main Flexbox properties are:

• display: flex - Specifies that child elements should use the Flexbox model.
• flex-direction - Specifies the direction in which elements will be arranged, whether they should be arranged in a horizontal line (row), vertical line (column), or reversed in a horizontal line (row-reverse) or vertical line (column-reverse).
• justify-content - Specifies how elements are distributed along the main axis, i.e., horizontally. We can set elements to be evenly distributed, centered, aligned to the left or right side, etc.
• align-items - Specifies how elements are distributed along the cross axis, i.e., vertically. We can set elements to be centered, aligned to the top, bottom, etc.
• flex-grow, flex-shrink, flex-basis - Define the flexibility and how elements adapt when there isn't enough space to display them in a line.
• align-self - Specifies the alignment of a single element along the cross axis, independently of other elements.

The Flexbox model is a very useful tool for designing responsive page layouts and managing the layout of elements within specific containers. Thanks to the flexibility and diverse possibilities it offers, Flexbox makes it easier to create unique and aesthetic web page layouts. For many years, styling was done through float and position properties. Older developers remember table-based layouts. However, they had their problems and sometimes styling was frustrating. The display: flex; declaration comes to the rescue:

1section {
2  display: flex;
3}

As you can see above, the display: flex; declaration will apply to the section element selector. In our case, the section will be the parent of three elements with the box class:

1<section>
2  <div class="box">Element 1</div>
3  <div class="box">Element 2</div>
4  <div class="box">Element 3</div>
5</section>

From the very beginning, we can see that the elements will be placed next to each other.

A flex container is the foundation of a pyramid, and flex items are the stones from which the pyramid is built. Just as stones can be arranged in different ways, flex items can be organized using various properties such as justify-content or align-items.

You'll learn more in the upcoming scrolls of knowledge, and at the end of the module, a special mini-game awaits you (https://flexboxfroggy.com/#en).

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Flexbox - Flex container</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flexbox - Flex Container</h1>
12
13        <section class="demo-section">
14            <h2>Without Flexbox (default)</h2>
15            <div class="no-flex">
16                <div class="item">Stone 1</div>
17                <div class="item">Stone 2</div>
18                <div class="item">Stone 3</div>
19            </div>
20            <p>Block elements stack one below another.</p>
21        </section>
22
23        <section class="demo-section">
24            <h2>With Flexbox (display: flex)</h2>
25            <!-- Add display: flex to the .flex-container class in style.css -->
26            <div class="flex-container">
27                <div class="item">Stone 1</div>
28                <div class="item">Stone 2</div>
29                <div class="item">Stone 3</div>
30            </div>
31            <p>After adding display: flex, elements line up side by side.</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>Practice: Egyptian gallery</h2>
36            <div class="gallery">
37                <div class="item gallery-item">Hieroglyph A</div>
38                <div class="item gallery-item">Hieroglyph B</div>
39                <div class="item gallery-item">Hieroglyph C</div>
40                <div class="item gallery-item">Hieroglyph D</div>
41            </div>
42            <p>Try adding display: flex to the .gallery class in CSS!</p>
43        </section>
44    </div>
45</body>
46</html>