CodeWorlds

HTML and CSS course · Module 4: Flexbox

Wrapping Elements - flex-wrap

5 min read ·
In this lesson8

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.

section {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

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>).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
  <title>Wrapping Elements</title>
</head>
<body>
  <section class="container nowrap">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
  <section class="container wrap">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
  <section class="container wrap-reverse">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
</body>
</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.

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #000;
  padding: 10px;
  width: 80%;
  height: auto;
  margin: 10px 0;
  flex-wrap: nowrap; /* Default value */
}

.container div {
  background-color: lightblue;
  margin: 5px;
  padding: 20px;
  text-align: center;
  flex: 1 1 30%;
}

Step 4: Layout with flex-wrap: nowrap

Add a style for the .nowrap class to keep elements in a single row without wrapping.

/* Layout with flex-wrap: nowrap */
.nowrap {
  flex-wrap: nowrap;
}

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.

/* Layout with flex-wrap: wrap */
.wrap {
  flex-wrap: wrap;
}

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.

/* Layout with flex-wrap: wrap-reverse */
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

Result

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

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
  <title>Wrapping Elements</title>
</head>
<body>
  <section class="container nowrap">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
  <section class="container wrap">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
  <section class="container wrap-reverse">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
</body>
</html>

CSS File (styles.css)

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #000;
  padding: 10px;
  width: 80%;
  height: auto;
  margin: 10px 0;
  flex-wrap: nowrap; /* Default value */
}

.container div {
  background-color: lightblue;
  margin: 5px;
  padding: 20px;
  text-align: center;
  flex: 1 1 30%;
}

/* Layout with flex-wrap: nowrap */
.nowrap {
  flex-wrap: nowrap;
}

/* Layout with flex-wrap: wrap */
.wrap {
  flex-wrap: wrap;
}

/* Layout with flex-wrap: wrap-reverse */
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

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!

Code for this lesson: index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox - Flex Wrap</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flex Wrap - Wrapping Elements</h1>
        <p class="subtitle">Control whether elements should wrap to a new line</p>

        <section class="demo-section">
            <h2>flex-wrap: nowrap (default)</h2>
            <div class="flex-container wrap-nowrap">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
                <div class="flex-item">5</div>
                <div class="flex-item">6</div>
                <div class="flex-item">7</div>
            </div>
            <p class="description">All elements in one line - they may shrink</p>
        </section>

        <section class="demo-section">
            <h2>flex-wrap: wrap</h2>
            <div class="flex-container wrap-wrap">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
                <div class="flex-item">5</div>
                <div class="flex-item">6</div>
                <div class="flex-item">7</div>
            </div>
            <p class="description">Elements wrap to the next line when there is not enough space</p>
        </section>

        <section class="demo-section">
            <h2>flex-wrap: wrap-reverse</h2>
            <div class="flex-container wrap-reverse">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
                <div class="flex-item">5</div>
                <div class="flex-item">6</div>
                <div class="flex-item">7</div>
            </div>
            <p class="description">Elements wrap in reverse order</p>
        </section>

        <section class="demo-section practice">
            <h2>Practice: Egyptian treasure gallery</h2>
            <p class="practice-description">The pharaoh's treasures in a responsive gallery</p>

            <div class="gallery">
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
            </div>

            <div class="gallery-info">
                <p>Change the window width to see how the gallery adjusts!</p>
            </div>
        </section>
    </div>
</body>
</html>

Docs entries used in this lesson

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

  1. 1. What is the default value of the flex-wrap property?

Hands-on tasks in the game

  • Click in order

    Arrange the CSS declaration that allows elements to wrap to new rows:

  • Code editor

    Create a flex container with multiple elements of fixed width and use flex-wrap: wrap so that elements automatically wrap to new rows.

Useful articles

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