s
Start Teaching
Messages
User
Back to Stories
CSS Flexbox
Technology
  • Jun 28, 2021
  • 1 minute

PREMIUM
 CSS 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; to our  flex-container 
  • 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; to our main content
    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>



Get full access to the courses and articles by this instructor
For more info check out our Terms of Use and Privacy Policy.

Learn with the best. Get access to all existing and future courses and articles created by Ahmed Magdy.

Recommended instructors

Find instructors for your goals & budget.