PREMIUMCSS Flexbox
Using FlexBox
I will introduce to you how to design a flexible responsive layout structure for your webpage and this is an advanced topic in CSS.
Imagine that you want to achieve the following look using CSS
Let's see the solution:
- Adding
display: flex;
to our flex-container - Setting a
max-width
for flex-container equals the sum of the width of the 2 boxes - Adding
flex-wrap: wrap;
- Adding different CSS classes to our boxes and setting their width & height
In CSS: First, we will set the style of flex-container
.flex-container {
/* here is the syntax to use flexbox design */
display: flex;
/* by using flex wrap flexbox will wrap the 2 remaining boxes when it reaches maximum width */
flex-wrap: wrap;
/* set maximum width of 2 boxes */
max-width:200px;
}
Then we will set 2 different style classes (odd and even) to the 2 different boxes
.flex-container .odd {
/* setting a box background color to blue */
background-color: blue;
/* setting the box width & height */
width:100px;
height:100px;
}
.flex-container .even {
/* setting a box background color to gray */
background-color: gray;
/* setting the box width & height */
width:100px;
height:100px;
}
and this is how our HTML will look like:
<div class="flex-container">
<div class="odd"></div>
<div class="even"></div>
<div class="even"></div>
<div class="odd"></div>
</div>
In Conclusion: flexbox smartly does the job and the design looks as expected.
Now you can follow the same concept in the previous example and build a web page layout with a header, navbar and content box, and footer.
Let's see how you can achieve this:
We will have a flex container and inside it a navbar and the main content
inside the main content, we will have the header, our content, and footer.
- Adding
display: flex;
to our flex-container - Setting flex-container min-height to 100vh (100% of the viewport height) and no margin.
- Adding
flex-direction: column;
the flex-direction property specifies the direction of the flexible items - Setting the flex-grow to the navbar, main content container, and its inside content
the flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. - Setting min-height of content to 60vh (60% of the viewport height)
- Setting the height of the header to 20vh (20% of the viewport height)
- Setting the height of the footer to 20vh (20% of the viewport height)
our CSS:
.flex-container {
display: flex;
min-height: 100vh;
margin: 0;
}
.navbar {
background: lightgray;
flex-grow: 1;
}
.main {
display: flex;
flex-direction: column;
flex-grow: 4;
}
.content {
flex-grow: 5;
min-height: 60vh;
}
.header, .footer {
background: lightblue;
height: 20vh;
}
.header, .footer, .content, .navbar {
padding: 1em;
}
HTML:
<div class="flex-container">
<nav class="navbar">Nav</nav>
<div class="main">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</div>
- Alex ShoolmanFuture Tech Expert, Teacher
- Rob Percival's CodestarsInstructor and founder of Codestars
- Michael HonkanenASL & English Teacher
- Nancy ReynerProfessional Fine Art Painter
- Geoff SinkerGuitar Teacher
Unlimited access to 1200+ online courses in Technology, Design, Lifestyle, and more.
Actionable online courses taught by top instructors & practitioners. Explore any interest or popular topic, and master your skills. Learn anything from trending tech skills to starting a business from scratch.




