Flex

Wow ! I am on my second story !

In this story, I want to briefly talk about my fev layout container !

I am not a fan of bootstrap style layout system so I was thrilled when I read about flexbox and css grid.

Flexbox reminds me of WPF StackPanel which is also one dimensional .

I would highly recommend this amazing article to understand how flexbox works it’s magic.

Here is a quick recipe to create
flex container :

1.Set display:flex
2.Set flex-direction to 'row' or 'column'
3.Set ‘justify-content ‘ to align items across MAIN axis.
4.Set ‘align-items ‘ to align items across CROSS axis.

Even after reading a couple of in-depth articles ,I was still confused about 'justify-content' and 'align-items' ☢️.

Finally I decided to create simple component to clear the confusion .
Here it is ‘Stack’ component inspired by StackPanel 💡.