Flexbox: Exercises

3 min readFeb 14, 2022

Ok, I confess Flexbox has not been an easy ride. The most difficult part has been figuring out the flex-basis, flex-grow, flex-shrink properties for flex-items.

Some exercises which I followed from JetbrainsAcadmy are as below:

Exercise 01

How much free space (in px) will item3 get considering defined properties?

<div class="flex-container">
  <div class="item1">Some text</div>
  <div class="item2">Some text</div>
  <div class="item3">Some text</div>
</div>

CSS

.flex-container{
  display: flex;
  width: 500px;
}

.item1{
  flex-basis: 100px; 
  flex-grow: 1;
}

.item2{
  flex-basis: 100px; 
  flex-grow: 1;
}

.item3{
  flex-basis: 100px; 
  flex-grow: 2;
}

Exercise 02

How will you define the following behavior using flex property

If there is free space, the first product should get 1/7 from it, the second one should get 4/7, and the last one should get the remaining 2/7. But if the size of the catalog is too small to fit all the products, they should be reduced with the values of the relevant CSS property 1, 2, and 2, respectively. The initial size of each section should be set to 6em.

Code in the pen — https://codepen.io/hennasingh04/pen/OJOxWdo

Exercise 03

There 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:

Code in the pen https://codepen.io/hennasingh04/pen/KKyXaEO

Exercise 04

Make each section bigger than the previous one by giving it a bigger part of the remaining free space. How will you make the sum of values of flex-growequal to 10?

<div class="menu">   <div class="menu-item item1">Home</div>
   <div class="menu-item item2">Catalog</div>
   <div class="menu-item item3">Cart</div>
   <div class="menu-item item4">Profile</div></div>

CSS

.menu{ width: 40vw;
 display: flex;
 height: 3em;
 line-height: 3em;
 background: linear-gradient(90deg, #8264f6, #66d390);
}.menu-item{  text-align: center;
  flex-basis: 1vw;
  border-right: 1px solid white;
  color: white;
}.menu-item:last-child{
     border: none;
}/* Edit the code below */.item1{}.item2{}.item3{
}.item4{}