Greetings.

I am Philip Iorwua, a software engineering student as Blockfuse Labs

Today, I will be talking about two things, box model and Flexbox.

These are almost similar since they both deal with layouts of your page but there are big differences between them.
Let's look at them individually .

BOX MODEL

Box Model is the essentially a box that wraps around every HTML element.
It is a layout of every image displayed in an HTML page.

It is important to note that, every HTML value is treated as a box, having some layouts;

*Content
*Padding
*Border
*Margin

Every HTML value is made up of these four values, be it an alphabet, a digit, an image, a video etc are treated as box.

Note: Those layers are invisible to the eyes unless defined.

Now, let's look at the layers.

*Contents: This is the portion , where contents are held in a webpage.
In a webpage, this is the layer where your content lay.

*Padding , this is the space between the content and the border.
It is also not visible unless defined.

*Border: This is the space between the padding and the margin.
It is also not visible unless defined.

*Margin: This is the space between outside the border.

It's is very important to define these layout to avoid the browser's default description .

Also, with the knowledge of the box model, you can calculate the total width or height of an element.

FLEXBOX

Flexbox is an advanced level of arranging items in your webpage.

This is a way of arranging items in two dimensions using flexible box model.

Flexbox operates just in two dimensions, rows or columns.

It operates by placing some items in a parent container, the parent container becomes flexible by setting the display to flex.

The items automatically align opposite to its previous direction ie if previous i. Row, it becomes in column and vise vassal

The flex-direction is used to determine the direction it should be arranged.

An advantage of using flexbox is that it makes it easier to design flexible responsive layout structure without using float of positioning.

So, it's quite essential to know this .