Hi there👋, i'll explain the CSS Flex and Grid, these are tools for building layout in CSS, we can build same layout using both these properties, some cases flex shines for other cases grid shines. I'll explain both of them with sandbox examples, so you can try-out how they work!
Flex comes with more horizontal & vertical alignment options. Very helpful in cases when there are layouts with multiple alignments.
Let's understand flex by creating a user-profile with avatar, name & email using flex, we'll create something similar to the below example👇
Now let's start some coding, i'll create a container div with image, name, email👇
Let's style it with some CSS
The default behavior of flex is it aligns elements in horizontal direction, so now our profile-pic, name & email elements appeared side by side. So how can we fix this🤔. Let's try wrapping a div around name, email element👇
Nice our alignment issue is fixed, this is because now we've 2 elements inside our container i.e image & div so those two appear side by side, the div again has 2 elements inside it.
In cases when you want to change the direction when using flex there is property called flex-direction
Let's explore the different alignment options in flex there are 2 other properties
align-items: this aligns stuff in vertical direction
justify-content: this aligns stuff in horizontal direction