Theory
Theory
Comments

The flex-wrap property, overflow of flex items

What happens if you add more flex items to a container than can fit in a single row?

They will be shrunk to the smallest possible width.
Even if you assign an explicit width to them, the flexbox mechanism can override this setting and reduce the width.
If they can no longer be fit in a container after it is shrunk, they will overflow its boundaries, but they will continue to be placed in a single row.

This is somewhat similar to the behavior of cells in a table.

You can change this behavior using the flex-wrap flex container property. By default, it has the value nowrap, that is, the flex items may not overflow onto a new line.

The wrap value allows flex items to overflow onto a new line if they do not fit into a container.

Let’s see how this works in practice.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flex items wrapping, flex-wrap</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug simba"></div> <div class="rug rudolf"></div> <div class="rug muffin"></div> </div> </body> </html>

CSS

.room { display: flex; } .rug { }

Goalscompleted

Assign the width 120px to the rugs (.rug),
Then add the cat Massimo as the last item to the .room block, meaning add the classes rug and massimo to the block.
And then set flex items to overflow onto a new line for .room.

The flex-wrap property, overflow of flex items

Comments

Log in

Sign up

Restore access