Css Flexbox 27.03.2018

Hi there firends, I'm gonna quick tell about what is css flex box and why we should switch from previous float-position relative etc. layout style to it.

First of all flex is a new display property of an element and it makes that element "flex" which is wide to it's parent container, and makes inside childs "flex item" elements which you will see saves us a lot of things.

1.) Flex container

Contains flex-items which are aligned horizontally or vertically , and wides to it's parent,

2.) Flex-item 

Positioned inside flex container. Aligned side by side or vertically with other flex-items, grow to is parent with desired size without causing ang overflows ;) 

Here is a very basic example to understand flex boxes from my codepen:


I loooved this new featured and strongly suggest you to switch from old layout tricks to flex layout. Have nice coding :)