How to Build Proffesional Websites Using Flexbox

My experience on Web Development

My experience with CSS on web development was frustrating before meeting with Flex-Box. The experience of calculating margins, widths, alignments, heights for the web page to look quite attractive. It made my web development experience quite not attractive. Only with the idea to put exactly a numerical value in the specific property, makes web designing tedious.

Flexbox the SOLUTION

With Flex-box property you don't need to worry about calculating: specific margins, widths, heights. Flex-box will calculate that perfect alignments and sizes so your website looks perfect. That's not all, but also make your website responsive, that's right, even if your website changes its size, your webpage should still look great. That's because Flex-box will accommodate the components based on the size of the browser window.

Start with flex

Before jumping into code and properties. First, we have to know how does Flex-box actually work. We have to know-how Flex-box works. Flex-box as the word says its a box, so we gotta think that we are going to fix the elements INSIDE THAT box.

As the image above, the box is the gray-dotted and the elements we will apply a specific order are the child's of that box (A, B, C).

After we have defined who is the "Box" and the "elements" we can proceed starting using flex, to start with flex, we put in our box:

Box{
display:flex;
}

Flex-Direction(Row)

By default

<flex-direction:row>

Some properties we can use on

 flex-direction:row 

Box{
display:flex;
justify-content:{center,flex-end,flex-start, space-between, space-around }

If the flex-direction is on

row

 justify-content

Vertical alignment can be achieved with the align-items property. This property has by default the value "stretch".

IMPORTANT: Our box must have a defined height attribute defined, so justify content properties can work on the Y- Axis.

Box{
display:flex;
align-items:(flex-end, flex-start,center,stretch,baseline)
height:400px;
}

Flex-Direction(Column)

If we need a column view we can achieve this, by using the property value "column" on flex-direction;

Box{
display:flex;
flex-direction:column;
}

Now if we use this approach, to move around the X-Axis we will need align-items, and to move around the Y-Axis we use justify-content;

IMPORTANT: align-items will need a height attribute for Box, so space-between, center,

Setting Weights and Orders to Childs

Let's pretend we have 3 Childs in our Box, and we want the middle child to be bigger than the other 2.In order to achieve this, we will have to use the property flex on b. The order of the childs is the following:

• A
• B
• C

In order to make "B" bigger, we do the following:

Box{
display:flex;
flex-direction:column;
}

A{
flex:1;
}

B{
flex:2;
}

C{
flex:1;
}

For orders of children is not necessary to put in the HTML a specific order of elements. This can be done on CSS with Flex-box property callled

order

Box{
display:flex;
}
A{
order:3;
}
B{
order:2;}
C{
order:1}

Conclusion:Flex-Box is the best choice.

Flexbox is best for arranging elements in either a single row, it will guarantee us: precision, time, and save us lines of codes. The use of Flex-Box is to make our web page looks better with the smallest amount of effort.