Flexbox: Exercises

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{}

Exercise 05

This is an online store catalog. One item should be bigger than the others since its seller paid the shop’s owner to promote their products.

Make the catalog look like the picture below by giving all the products, except for the promoted one, 6/35 of the ‘free space.

The initial size of all the items should be 100vw.

Code in the pen linked https://codepen.io/hennasingh04/pen/gOXGgVd

I would love to hear your recommendations tips and tricks on Flexbox, until tomorrow 👋

--

--

--

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, Kotlin and paper crafts.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Become a black belt DBeaver sensei

Quorum: first look

The need for a Generic Config Management System

Implementing Adaptive HTTP Streaming Using the Web

InvArch weekly news 01/14/2022

CS371p Fall 2021: Martin Nguyen

Maven Project SonarQube Integration

Energybox Enhancing Facilities Management with IoT & Automation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Henna Singh

Henna Singh

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, Kotlin and paper crafts.

More from Medium

Calculator

Things you didn’t know about HTML

How to improve your HTML & CSS skills

A music player design with it’s corresponding tailwind css UI code

5 Reasons To Try CSS Grid On Your Next UI Development