We use cookies to enhance your experience on the site
Privacy Policy
OK
CodeWorlds

Wrapping Elements - flex-wrap

Imagine a procession of priests in an ancient Egyptian temple. If the corridor is wide enough, all priests walk in a single row. But when the corridor narrows, some of them must move to the next row. This is exactly how the 

flex-wrap
property works in CSS Flexbox!

By default, all elements with the 

display: flex;
declaration on their parent will try to fit in a single line. You can change this and allow elements to wrap to the next lines.

1section {
2  display: flex;
3  flex-wrap: nowrap | wrap | wrap-reverse;
4}

In the Flexbox model, we also have the ability to control the wrapping behavior of elements when they don't fit in a single row. Here are three wrapping options:

  • The "nowrap" option (default) - all elements will be kept in a single row without wrapping. Elements will try to fit in the available space without creating new lines.

  • The "wrap" option - elements will wrap to new lines from top to bottom. When elements don't fit in the current row, they will be moved to the next line, creating a multi-line layout.

  • The "wrap-reverse" option - elements will wrap to new lines but in reverse order, from bottom to top. Elements that don't fit in the current line will be moved to the previous line.

Thanks to these options, we can flexibly control the layout of elements in a Flexbox container, accounting for their wrapping to new lines, which allows for proper adaptation of the layout to the available space.

Exercise: Wrapping Elements

In this exercise, you will learn how to use the 

flex-wrap
property in the Flexbox model to control the wrapping of elements when they don't fit in a single row. Your task will be to create a web page with containers that are arranged in different layouts using this property.

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>Wrapping Elements</title>
8</head>
9<body>
10  <section class="container nowrap">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14    <div>Element 4</div>
15    <div>Element 5</div>
16    <div>Element 6</div>
17    <div>Element 7</div>
18    <div>Element 8</div>
19  </section>
20  <section class="container wrap">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24    <div>Element 4</div>
25    <div>Element 5</div>
26    <div>Element 6</div>
27    <div>Element 7</div>
28    <div>Element 8</div>
29  </section>
30  <section class="container wrap-reverse">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34    <div>Element 4</div>
35    <div>Element 5</div>
36    <div>Element 6</div>
37    <div>Element 7</div>
38    <div>Element 8</div>
39  </section>
40</body>
41</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  flex-wrap: nowrap; /* Default value */
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}

Step 4: Layout with 
flex-wrap: nowrap

Add a style for the 

.nowrap
class to keep elements in a single row without wrapping.

1/* Layout with flex-wrap: nowrap */
2.nowrap {
3  flex-wrap: nowrap;
4}

Step 5: Layout with 
flex-wrap: wrap

Add a style for the 

.wrap
class to wrap elements to new lines when they don't fit in a single row.

1/* Layout with flex-wrap: wrap */
2.wrap {
3  flex-wrap: wrap;
4}

Step 6: Layout with 
flex-wrap: wrap-reverse

Add a style for the 

.wrap-reverse
class to wrap elements to new lines in reverse order, from bottom to top.

1/* Layout with flex-wrap: wrap-reverse */
2.wrap-reverse {
3  flex-wrap: wrap-reverse;
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>Wrapping Elements</title>
8</head>
9<body>
10  <section class="container nowrap">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14    <div>Element 4</div>
15    <div>Element 5</div>
16    <div>Element 6</div>
17    <div>Element 7</div>
18    <div>Element 8</div>
19  </section>
20  <section class="container wrap">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24    <div>Element 4</div>
25    <div>Element 5</div>
26    <div>Element 6</div>
27    <div>Element 7</div>
28    <div>Element 8</div>
29  </section>
30  <section class="container wrap-reverse">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34    <div>Element 4</div>
35    <div>Element 5</div>
36    <div>Element 6</div>
37    <div>Element 7</div>
38    <div>Element 8</div>
39  </section>
40</body>
41</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  flex-wrap: nowrap; /* Default value */
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}
27
28/* Layout with flex-wrap: nowrap */
29.nowrap {
30  flex-wrap: nowrap;
31}
32
33/* Layout with flex-wrap: wrap */
34.wrap {
35  flex-wrap: wrap;
36}
37
38/* Layout with flex-wrap: wrap-reverse */
39.wrap-reverse {
40  flex-wrap: wrap-reverse;
41}

Additional Task

  1. Add more sections with different 
    flex-wrap
    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 

flex-wrap
property in the Flexbox model to control the wrapping of elements when they don't fit in a single row.

Remember: 

flex-wrap
is like planning a procession in an Egyptian temple - you decide whether participants should crowd into a single row or can elegantly move to the next ones!

Go to CodeWorlds→