CSS Flexbox Layout Module (part-1)

By Aliul Islam

Date: January 10, 2020

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…