Theory
Theory
Comments

Flexible menu with overflowing content

And now let’s create another “flexible” menu that is similar to the one we made in the assignment from the last chapter.

Remember that in the previous version the items were evenly distributed inside the menu container using justify-content: space-around.

The new menu option will be more adaptive: the menu items will be transferred to the next line if there is not enough space. And in order to achieve beautiful symmetry, the items will be spread out to occupy the entire menu container. And, again, flex-grow will help us to achieve this.

Create a basic layout and configure the lines to overflow.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flexible menu with overflowing content</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <header> <div class="logo"> <img src="img/keksby.svg" alt="Keksby"> </div> <nav class="menu"> <div> <a href="#">Norwegian salmon</a> </div> <div> <a href="#">Wolffish</a> </div> <div> <a href="#">Crucian</a> </div> <div> <a href="#">Perch</a> </div> <div> <a href="#">Mirror carp</a> </div> </nav> </header> </body> </html>

CSS

.menu { }

Goalscompleted

Assign the flexbox layout for the .menu,
and then add another div with the text link Shark as the last item in the menu.
Then configure the flex items in the menu to overflow onto a new line.

Flexible menu with overflowing content

Comments

Log in

Sign up

Restore access