PREMIUMCSS Flexbox

Jun 28, 20211m read
CSS Flexbox
Technology

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>



Recommended instructors

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.

Start for free now
More than 1200 courses