Child Properties

Order

The "order" property in the Flexbox model allows controlling the display order of flex elements in a container. By default, elements are arranged in source order, i.e., the order in which they appear in the HTML code. However, the "order" property allows changing this order and arbitrarily setting the order in which elements should appear on the page.

The value of the "order" property is an integer. The lower the value, the earlier the element will be displayed. If two or more elements have the same "order" value, their order from the HTML code is preserved.

An example of using the "order" property could be a situation where we want to change the display order of some flex elements in a container. For example, if we have two elements A and B, we can set "order: 2" for element A and "order: 1" for element B. As a result, element B will be displayed first, despite appearing after element A in the source code.

Thanks to the "order" property, we can flexibly manipulate the order of flex elements, giving us greater control over the page layout and content presentation.

1.box {
2  order: 5;
3}

The "flex-grow" property in the Flexbox model defines the ability of an element to grow if necessary. It accepts a unitless value that serves as a proportion. The "flex-grow" value determines how much space inside the flex container a given element should occupy.

For example, if all elements in a container have "flex-grow: 1" set, the remaining available space in the container will be equally divided among all children. If one of the children has "flex-grow: 2", it means that child will try to occupy twice as much space as the other elements.

An example of using the "flex-grow" property could be a Flexbox container with three elements with the "box" class. If we set "flex-grow: 2" for the first element and "flex-grow: 1" for the other two, the first element will try to occupy twice as much space as the remaining elements.

The "flex-shrink" property in the Flexbox model defines the ability of a flex element to shrink when needed. It works on a proportion basis, similar to "flex-grow". The "flex-shrink" value determines how an element should shrink relative to other elements when the available space in the container is limited.

For example, if all elements have "flex-shrink: 1" set, the remaining available space in the container will be equally distributed among all children. If one of the children has "flex-shrink: 2", it means that child will try to shrink twice as fast as the other elements when available space is limited.

An example of using the "flex-shrink" property could be a Flexbox container with three elements with the "box" class. If we set "flex-shrink: 2" for the first element and "flex-shrink: 1" for the other two, the first element will try to shrink twice as fast as the remaining elements when available space is limited.

The "flex-basis" property in the Flexbox model specifies the initial size of an element before accounting for growth or shrinking. It can be set as a unitless value or as a percentage relative to the container width.

For example, if we set "flex-basis: 200px" for an element, initially that element will have a width of 200 pixels. Only after accounting for the "flex-grow" and "flex-shrink" values will the element adjust its width depending on the available space in the container.

An example of using the "flex-basis" property could be a Flexbox container with three elements with the "box" class. If we set "flex-basis: 200px" for the first element and "flex-basis: 150px" for the other two, the first element will have an initial width of 200 pixels, and the remaining elements will have an initial width of 150 pixels.

The "align-self" property in the Flexbox model allows individually centering an element along the cross axis, bypassing settings defined for the entire container. It works similarly to the "align-items" property but applies only to a specific element, not all elements in the container.

For example, if we set "align-self: center" for one of the elements, that element will be centered along the cross axis, regardless of the "align-items" settings for the entire container.

An example of using the "align-self" property could be a Flexbox container with three elements with the "box" class. For one of the elements, we set "align-self: center", which causes that element to be centered along the cross axis, while the remaining elements maintain the settings defined for the entire container.

Exercise: Child Properties in Flexbox

In this exercise, you will learn how to use the order, flex-grow, flex-shrink, flex-basis, and align-self properties in the Flexbox model to precisely control the layout of elements in a container. Your task will be to create a web page with containers that are arranged in different layouts using these properties.

Step 1: Create a Basic HTML Document Structure

First, create a new HTML file and add a basic HTML document structure. Add a <section> element with several <div> elements in the document body (<body>).

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  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Child Properties in Flexbox</title>
8</head>
9<body>
10  <section class="container">
11    <div class="box order-1">Element 1</div>
12    <div class="box order-2">Element 2</div>
13    <div class="box order-3">Element 3</div>
14  </section>
15  <section class="container">
16    <div class="box grow-2">Element 1</div>
17    <div class="box grow-1">Element 2</div>
18    <div class="box grow-1">Element 3</div>
19  </section>
20  <section class="container">
21    <div class="box shrink-2">Element 1</div>
22    <div class="box shrink-1">Element 2</div>
23    <div class="box shrink-1">Element 3</div>
24  </section>
25  <section class="container">
26    <div class="box basis-200">Element 1</div>
27    <div class="box basis-150">Element 2</div>
28    <div class="box basis-100">Element 3</div>
29  </section>
30  <section class="container">
31    <div class="box self-center">Element 1</div>
32    <div class="box">Element 2</div>
33    <div class="box">Element 3</div>
34  </section>
35</body>
36</html>

Step 2: Create a CSS File

Open or create a new CSS file and save it as styles.css.

Step 3: Basic Styling

Add basic styles for the <section> and <div> elements so they are visible on the page.

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17}
18
19.container .box {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Step 4: Using the order Property

Add styles for the .order-1, .order-2, and .order-3 classes to change the display order of elements.

1/* Layout with order */
2.order-1 {
3  order: 1;
4}
5
6.order-2 {
7  order: 2;
8}
9
10.order-3 {
11  order: 3;
12}

Step 5: Using the flex-grow Property

Add styles for the .grow-1 and .grow-2 classes to change the growth proportions of elements.

1/* Layout with flex-grow */
2.grow-1 {
3  flex-grow: 1;
4}
5
6.grow-2 {
7  flex-grow: 2;
8}

Step 6: Using the flex-shrink Property

Add styles for the .shrink-1 and .shrink-2 classes to change the shrinking proportions of elements.

1/* Layout with flex-shrink */
2.shrink-1 {
3  flex-shrink: 1;
4}
5
6.shrink-2 {
7  flex-shrink: 2;
8}

Step 7: Using the flex-basis Property

Add styles for the .basis-100, .basis-150, and .basis-200 classes to set the initial size of elements.

1/* Layout with flex-basis */
2.basis-100 {
3  flex-basis: 100px;
4}
5
6.basis-150 {
7  flex-basis: 150px;
8}
9
10.basis-200 {
11  flex-basis: 200px;
12}

Step 8: Using the align-self Property

Add a style for the .self-center class to center one of the elements along the cross axis.

1/* Layout with align-self */
2.self-center {
3  align-self: center;
4}

Result

After completing all the steps, your HTML and CSS files should look as follows:

HTML File (index.html)

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  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Child Properties in Flexbox</title>
8</head>
9<body>
10  <section class="container">
11    <div class="box order-1">Element 1</div>
12    <div class="box order-2">Element 2</div>
13    <div class="box order-3">Element 3</div>
14  </section>
15  <section class="container">
16    <div class="box grow-2">Element 1</div>
17    <div class="box grow-1">Element 2</div>
18    <div class="box grow-1">Element 3</div>
19  </section>
20  <section class="container">
21    <div class="box shrink-2">Element 1</div>
22    <div class="box shrink-1">Element 2</div>
23    <div class="box shrink-1">Element 3</div>
24  </section>
25  <section class="container">
26    <div class="box basis-200">Element 1</div>
27    <div class="box basis-150">Element 2</div>
28    <div class="box basis-100">Element 3</div>
29  </section>
30  <section class="container">
31    <div class="box self-center">Element 1</div>
32    <div class="box">Element 2</div>
33    <div class="box">Element 3</div>
34  </section>
35</body>
36</html>

CSS File (styles.css)

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17}
18
19.container .box {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Layout with order */
28.order-1 {
29  order: 1;
30}
31
32.order-2 {
33  order: 2;
34}
35
36.order-3 {
37  order: 3;
38}
39
40/* Layout with flex-grow */
41.grow-1 {
42  flex-grow: 1;
43}
44
45.grow-2 {
46  flex-grow: 2;
47}
48
49/* Layout with flex-shrink */
50.shrink-1 {
51  flex-shrink: 1;
52}
53
54.shrink-2 {
55  flex-shrink: 2;
56}
57
58/* Layout with flex-basis */
59.basis-100 {
60  flex-basis: 100px;
61}
62
63.basis-150 {
64  flex-basis: 150px;
65}
66
67.basis-200 {
68  flex-basis: 200px;
69}
70
71/* Layout with align-self */
72.self-center {
73  align-self: center;
74}

Additional Task

1. Add more sections with different order, flex-grow, flex-shrink, flex-basis, and align-self values to better understand how the different options work.
2. Try adding more styles to your page, such as changing colors, sizes, and other element properties to better understand how the different options work.
3. Test your skills by creating more complex layouts using different combinations of Flexbox properties.

After completing this exercise, you should better understand how to use the order, flex-grow, flex-shrink, flex-basis, and align-self properties in the Flexbox model to precisely control the layout of elements in a container.

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 Grow & Shrink</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flex Grow & Shrink - Element Flexibility</h1>
12        <p class="subtitle">Control how elements grow and shrink</p>
13
14        <section class="demo-section">
15            <h2>flex-grow: 0 (default)</h2>
16            <div class="flex-container">
17                <div class="flex-item grow-0">flex-grow: 0</div>
18                <div class="flex-item grow-0">flex-grow: 0</div>
19                <div class="flex-item grow-0">flex-grow: 0</div>
20            </div>
21            <p class="description">Elements do not grow - free space remains</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>flex-grow: 1</h2>
26            <div class="flex-container">
27                <div class="flex-item grow-1">flex-grow: 1</div>
28                <div class="flex-item grow-1">flex-grow: 1</div>
29                <div class="flex-item grow-1">flex-grow: 1</div>
30            </div>
31            <p class="description">All elements grow evenly filling the space</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>flex-grow: Different values</h2>
36            <div class="flex-container">
37                <div class="flex-item grow-1">flex-grow: 1</div>
38                <div class="flex-item grow-2">flex-grow: 2 (twice as much)</div>
39                <div class="flex-item grow-3">flex-grow: 3 (three times as much)</div>
40            </div>
41            <p class="description">Elements grow proportionally to flex-grow values</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>flex-shrink: 0 vs 1</h2>
46            <div class="flex-container">
47                <div class="flex-item shrink-0">flex-shrink: 0<br>(does not shrink)</div>
48                <div class="flex-item shrink-1">flex-shrink: 1</div>
49                <div class="flex-item shrink-1">flex-shrink: 1</div>
50                <div class="flex-item shrink-1">flex-shrink: 1</div>
51            </div>
52            <p class="description">First element keeps its size, others shrink</p>
53        </section>
54
55        <section class="demo-section practice">
56            <h2>Practice: Egyptian columns</h2>
57            <p class="practice-description">Building a temple - columns with different proportions</p>
58
59            <div class="temple">
60                <div class="column small-column">
61                    <div class="capital">▥</div>
62                    <div class="shaft">Column<br>small<br>(grow: 1)</div>
63                    <div class="base">▓</div>
64                </div>
65
66                <div class="column medium-column">
67                    <div class="capital">▥</div>
68                    <div class="shaft">Column<br>medium<br>(grow: 2)</div>
69                    <div class="base">▓</div>
70                </div>
71
72                <div class="column large-column">
73                    <div class="capital">▥</div>
74                    <div class="shaft">Column<br>large<br>(grow: 3)</div>
75                    <div class="base">▓</div>
76                </div>
77
78                <div class="column small-column">
79                    <div class="capital">▥</div>
80                    <div class="shaft">Column<br>small<br>(grow: 1)</div>
81                    <div class="base">▓</div>
82                </div>
83            </div>
84
85            <div class="temple-info">
86                <p>Each column grows proportionally to its flex-grow value</p>
87            </div>
88        </section>
89    </div>
90</body>
91</html>