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; 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>