Computer scienceFrontendCSSFlexbox

Flexibility, growth and contraction ratio

Theory

Flex-basis

Report a typo

This is a website navigation bar. Right now a user is browsing the catalog.

You need to set the initial width value of all the menu items to 1vw and make the current section bigger than the others by giving it 2/5 of the free space. The result should be identical to the picture below:

Navigation links placed in one row

Tip: Default value for flex-grow is 0, so don't forget to apply the property to .menu-item.

Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flex-basis</title>
</head>
<body>
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item current">Catalog</div>
<div class="menu-item">Cart</div>
<div class="menu-item">Profile</div>
</div>
</body>
</html>
Completed 0 of 2
Styles applied to .current
Styles applied to .menu-item
___

Create a free account to access the full topic