There are lot of articles that define what flex box is, its different CSS properties etc, in this we will be creating a layout using flexbox given in below image and learn along the way

Lets convert this into a simple layout outline only, no content itself

Note: I am not very well versed with front-end stuff, so this just me learning and I might be totally wrong about this approach but will find out sooner,

Ok so from design, it seems the section has main 2 parts one at top which we will call nav section and on below it we call hero section

Nav section:

Nav section also has 2 parts, one for the sitename/logo and other for the actual menu items ( it can be divided further but lets keep it simple for now )

So we can use flexbox here to put this items in

This is the layout I created ( it is nowhere near the actual one but we are close

And here’s what I used,

display: flex – obviously we have to set display of the container to flex to make it flex box

justify-items

So basically the flex box has 2 axis main axis and cross axis, main axis means the imaginary line that the items are added in, for example in row direction i.e default flex direction the main axis will be the horizontal line and the cross axis will be the vertical line. This will be reversed for the column direction

To align items wrt to the main axis we use justify-content property and to align according wrt to cross axis we use align-items property, I mostly use justify-content in above since all the boxes are laid out in row direction

Flex grow : this property is for flex item and not the flex container itself, this will decide if the flex item will grow and by how much, greater the number greater the space will be taken by this item, we can set it to 0 so flex item does not grow at all beyond its defined size

Flex shrink: This is used to define if the flex item should decrease in size or not depending on the screen size, if set to 0, the item will not shrink