CSS Flexbox Layout Module (Part-2)

Hope that you all like my last blog about Flexbox. Today we will learn more about Flexbox elaborately.     

1. Flexbox Direction

Flexbox direction is a single direction concept. Flex has two direction horizontal rows or vertical columns. Flexbox direction property:

.container {
   flex-direction: row | row-reverse | column | column-reverse;
}

The flex-direction default value is row. Now we will create a menu-bar where we are going to use flex-direction.

HTML :

<div class="container">
       <h2 class="header">flex-direction property</h2>
 
       <ul class="menu">
           <li><a href="#home">Home</a></li>
           <li><a href="#news">News</a></li>
           <li><a href="#contact">Contact</a></li>
           <li><a href="#about">About</a></li>
       </ul>
</div>

CSS: 

body {
   margin: 0;
   padding: 0;
}
a{
   text-decoration: none;

}
 
li{
   list-style: none;
}
.container {
   width: 800px;
   background: #CECECE;
   margin: auto;
}
.header{
   margin-bottom: 5px;
}
 
.menu {
   display: flex;
   justify-content: center;
   flex-direction: row;
}
 
.menu>li {
   padding: 5px;
}

Output:

Suppose we want the menu in reverse order, change flex-direction value to row-reverse.

Output:

Another most exciting use of flex-direction is a sidebar menu. We can easily create vertical column-wise sidebar menus. Here we change the flex-direction to the column. 

CSS:

.menu {
   display: flex;
   justify-content: center;
   flex-direction: column;
}

Output :

You can also reverse the column output.

.menu {
   display: flex;
   justify-content: center;
   flex-direction: column-reverse;
}

Output:

2. Flexbox Item order

By default, flex items an order is source order. Suppose we have three items. Now we change the view order without changing the HTML.

Now we want item-2 to be the first position and then after item-1 is second and item-3 is third. We change it by merely copying paste item-2 before item-1, but now we don’t touch HTML code. We use flex order property. Now we see how to change their position.

HTML:

<div class="content">
           <div class="item">
               <h3>Item 1</h3>
               <p>
                   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
                   ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
                   not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
               </p>
           </div>
           <div class="item">
               <h3>Item 2</h3>
               <p>
                   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
                   text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                   It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                   It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                   and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
               </p>
           </div>
           <div class="item">
               <h3>Item 3</h3>
               <p>
                   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
                   ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
                   not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
               </p>
           </div>
       </div>

CSS:

.content{
   width: auto;
   display: flex;
   justify-content: center;
   margin-top: 10px;
}
 
.content>.item {
   text-align: center;
   border: 1px solid #000000;
   margin-right: 5px;
   padding: 5px;
}

Before use order property its look like this :

Now change there order :

CSS:

.content :nth-child(1) { order: 2; }
.content :nth-child(2) { order: 1; }
.content :nth-child(3) { order: 3; } 

We don’t need to change HTML code where easily can change their order by using their flex order property. 

3. Flexbox Grow property

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space will take up twice as much space as the others (or it will try to, at least).

HTML:

<h1>The flex-grow Property</h1>
 
       <div class="grow">
       <div style="background-color:#FB7F4F;"></div>
       <div style="background-color:#ADD8E6;"></div>
       <div style="background-color:#F0E68C;"></div>
       <div style="background-color:#FAC0CA;"></div>
       <div style="background-color:#9F5E31;"></div>
       </div>

CSS:

.grow {
   width: 100%;
   height: 100px;
   border: 1px solid #c3c3c3;
   display: flex;
}
  .grow div:nth-of-type(1) {flex-grow: 1;}
 .grow div:nth-of-type(2) {flex-grow: 3;}
 .grow div:nth-of-type(3) {flex-grow: 1;}
 .grow div:nth-of-type(4) {flex-grow: 1;}
 .grow div:nth-of-type(5) {flex-grow: 1;}

Output :

So today we learn about direction, order and the grow property of Flexbox.

The FlexBox Layout Module makes it easier to design a flexible, responsive layout structure without using float or positioning. Before the flexbox layout module, there are four layout modules:

1. Block
2. Inline
3. Table 
4. Positioned

To work with flexbox, we don’t need to install any extra plugins or software. It is a built-in property of CSS3. It is a layout to work. It’s straightforward to use in your project.  

Browser Compatibility 

Flexible Layout must have a parent element with the display property set to flex.
Today we will learn how to place a logo center in the header section. 
First we create index.html file

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Flexbox</title>
</head>
<body>
   <div class="header">
       <h2>Logo</h2>
   </div>
  
</body>
</html>

Now create a style.css file same directory and link that css file to your index.html file

<link rel="stylesheet" href="style.css">

Open your style.css and write this css

*{
   margin: 0;
   padding: 0;
}
 
body{
   background-color: cadetblue;
}
 
.header{
   display: flex;
   background-color: #cecece;
   height: 60px;
   align-items: center;
   justify-content: center;
}

Output: 

Mobile view

Desktop view

Here you can see that we write no media query CSS to make it responsive. It’s already responsive. Now overview the CSS.

We put display flex on the parent class. Parent class also has two CSS property align-item and justify-content. Align-item is working on y-axis and justify-content working on the x-axis. If we want a content position in a horizontal center, we use justify-content: center, that places the content to center position. If we want a content position in a horizontal center, we use align-item: center, that places the content to center position.

/* Item Position alignment */
align-items: center; /* Make items around the center */ 
align-items: start; /* Make items from the start */ 
align-items: end; /* Make items from the end */ 
align-items: flex-start;/* Make the flex items from the start */ 
align-items: flex-end; /* Make the flex items from the end */

justify-content: center; /* Make items around the center */ 
justify-content: start; /* Make items from the start */ 
justify-content: end; /* Make items from the end */ 
justify-content: flex-start;/* Make the flex items from the start */ 
justify-content: flex-end; /* Make the flex items from the end */

In my next blog, we will talk more about Flex-box, with some other tricks…