Everything you need to know about CSS Flexible Box Layout

THREAD

Start appyling display: flex; property to parent element
This will take the all the elements in horizontal direction

You can also change the direction of elements. For doing so, you need to mention the flex-direction property

The flex-direction property specifies the direction of the items within the flex container

After applying row, row-reverse, column and column-reverse in flex-direction

They all are pretty intuitive.

I think this is right time to understand what main and cross axes are

As you can see our elements have shrunk a bit. This is becasue we haven't applied the flex-wrap property.

It defines whether the flex items are forced in a single line or can be flowed into multiple lines depending on screen size

.parent {
flex-wrap: wrap;
}

Time to align flexible items with flex container

Justify-content: For horizontal alignment
Align-content: For vertical alignment

The justify-content property aligns the items within flex container.

- flex-start
- flex-end
- center
- space- between (Items will equal space between them)
- space-around (equal space b/w elements with half left side and half right side)
- space-evenly

align-content for vertical alignment. For example

You can also position a particular item inside flex container

https://twitter.com/Prathkum/status/1359779243115257861?s=20

For example:

If you want to change the ordering of the items within flex container. You can use order property that specifies the order of an item relative to the rest of the items inside the same flex container