Writing CSS the Easy Way | FlexBox

If you have just started writing CSS codes it’s highly likely that you are having a hard time making the page responsive or aligning the components properly or positioning the components as you have in your mind. This article is about how to maintain the hierarchy of the page and in turn making CSS more logical. The best way to learn is to open code pen and write the code yourself also and see what happens.

MAINTAINING THE HIERARCHY

Having a complete picture of how the page is structured is important and <div>is your lifesaver. For example, if you are making a nav bar, its structure will be something like this:

<div class="nav-bar">
 <div class="logo"> 
    <h1>LOGO</h1>
 </div>
 <div class="nav-links-container">
 <div class="nav-link"> Home </div>
 <div class="nav-link"> About </div>
 <div class="nav-link"> Contact </div>
 </div>
</div>

This structure will help a lot when you apply CSS on it.

ADDING BACKGROUND COLOR FOR BETTER VISUALIZATION

Here I have added different background colors to all the components and now you can see clearly how much space each one is taking, how it is aligned wrt its parent container. (Note : I have added few paddings so that you can see more clearly, but you don’t need to do that after you understand the structure)

.nav-bar{
  background-color:green;
  padding:5px;
}
.logo{
  background-color:red;
}
.nav-links-container{
  background-color:blue;
  padding: 10px
}
.nav-link{
  background-color:yellow;
  margin:2px;
}

USING FLEX-BOX

Now you know how to structure your nav bar but it doesn’t look quite good. Here comes the FLEX-BOX!!. Flex box is a module that aims at providing a more efficient way to lay out, align and distribute space among items in a container. The display property of any container is set to flex and after doing that all the child components inside that container is arranged in sort of an array either horizontally(default) or verically. Lets see what happens after I do: nav-bar{ display:flex; } (To change the direction to vertical we add flex-direction:column

You can see it is arranged horizontally but the width doesn’t look quite right. For this, we use the property flex .Keep in mind that only the child containers of the container having display set to flex can use the flex property. The flex property defines the ratio of the total width/height the child containers will take. Here we want the logo and nav-links-container to have equal width hence 1:1 . So we set flex:1 in both logo &nav-links-container, .logo,.nav-links-container{ flex:1; } (change the value to 2:1 to see how its affects)

You can set the display property of logo container and nav-links-container to flex to arrange the links horizontly. Lets see the final result:

ALIGNMENT IN FLEX-BOX

Now we can focus on logo container and nav-links-container seperately. The logo is way over to the left. In flex box there are two types of alignment, along the main-axis and along the cross-axis. The main-axis is the axis along which the child components is aligned and the other one is cross-axis. To align the child components along main-axis we use justify-content:center . After adding this to the logo container .logo { justify-content : center; }

We are almost done, but the nav-links are too close. One way to fix this is the align it to the center and add margins to all the individual links. But it can be done more efficiently by using justify-content : space-around There are more values that can be given to justify-content that u can read about yourself. .nav-links-container { justify-content : space-around; }

Now we can focus on the nav-links. First lets align the nav-links along the vertical axis which is the cross-axis here, to do this we use align-items property .nav-link { display: flex ; align-items: center; }

Remove the background colors to see final result

You can add shadows, animations, fonts, colors to make it one of a kind. The idea behind the blog was to learn the thought process. Only one thing is left now is to make this bar responsive.

Media queries

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types. That means you can have different set of CSS rules based on the screen size, viewport or orientation of the screen. We will focus on the screen size here. Let’s say after the screen size decreases to 800px or less we can say that the device is a mobile phone. We can write new CSS for this device using the following syntax :

@media (max-width:800px){
.nav-bar{ 
      flex-direction:column;
  }
}

BEFORE YOU GO

Reading it for the first time you might find it bit tricky to understand. Try writing the code along side and you will understand better.

One thing to remember is that the flex property can only be used for the child components of a container having display set to flex and all the others like justify-content align-items flex-direction etc are used for the container having display set to flex.

SUMMARY

1. display:flex To arrange the components horizontally/vertically.
2. flex-direction To change the axis along which the components are arranged.
3. flex To set the width of the child components wrt to the parent container.
4. justify-content To align components along main-axis.
5. align-items To align components along main-axis.
6. @media To define different style rules for different media types.

Follow me on facebook and instagram and visit my website.