make your website layout using flexbox

hello everyone and welcome back to a new tutorial, today we will speak about FlexBox, you have heard about it everywhere and you want to know what is flexbox. You are at the right place, in this tutorial we will see what is FlexBox, how we can use it and in the end, we will see how to make a simple web layout for your future blogs and portfolio.

what is flexBox?

Flexbox is a CSS tool that allows us to make a unidimensional layout and align elements on row or column.

elements size will be automatically changed to take the rest space.

why using flexbox?

I think that this is a nice question to start with, to answer i will expose to you a situation that is frequent when you want to develop your website.
So imagine that you have a set of elements and you want to align those elements in the same row and make it look responsive. of course, the old solution is to use Float: left; but the problem when you will use this property you will have some problems with width and it affects other elements. that's why it's necessary to learn and understand FlexBox and I am here to help you.

an example to start with

imagine that you want to align divs in a parent one like in the picture below:

so let's start by making the HTML part of this:

<!DOCTYPE HTML>
<html>
<head>

</head>

<body>
<h1>FlexBox exemple</h1>
<div class="parent">
<p>Parent element</p>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</body>

</html>

and let see the CSS part:

.parent{

width:100%;

border: 1px solid black;

padding: 10px;

display: flex;

flex-direction: row;

}

.child{

background-color: #fafafa;

margin:0 5px;

width: 20%;

height: 100%;

}

as you can see there is two property that i colored in green,
display:flex; and flex-direction: row; i will explain them one at one.
as you know display allows us to add the display method of the element, there are block, inline-block, table ... . And we used Flex to tell our browser that we want to display it with flexbox method, then we added the flex-direction to precise how we want our element to be displayed. There are four possible directions but the common ones are row and column.

for the width of the child elements, all that you have to do is to divide 100/nb of elements for example if you will align 5 elements then their width will be 100/5 = 20% and that's it.

HomeWorks
I know this word is hated by many people but trust pe the best way to be sure that we understood something is to test ourselves so if you are interested you have to make this simple layout using FlexBox you can publish it on our official group in facebook: Doctor code.

make your website layout using flexbox