flexbox

I'll show you flexbox with a few examples from my video on YouTube - https://youtu.be/k1CigYz5Tlg. The images are screenshots.They don't have a good quality but everything is quite simple.
This is a div with a class named container with 3 divs inside with a class called box:

This is the styling for the container and the boxes:

And this is what it looks like in the browser:

This is what it looks like when you add display: flex;

The items display as a row from left to right, like we read sentences in English.
The gap property creates a gap between the items:

flex-direction: column; will make them display as a column:

When you add display: flex; the property flex-direction is set to row. When flex-direction is set to row the row is called the main axis. When it's set to column the column is called the main axis. The cross axis is perpendicular to the main axis:

The justify-content property changes their position along the main axis. justify-content: center; will place the items at the center of the container:

The justify-content property changes their position along the main axis. justify-content: center; will place the items at the center of the container:

justify-content: flex-end; will position them at the end of the container:

justify-content: flex-start; will place them at the start of the container:

justify-content: space-around; gives every item equal space on both sides (the space between them looks bigger because of the gap):

justify-content: space-between; create space between them, but not around the container:

justify-content: space-equal; makes the space between them and around the container equal:

I added height: 80vh; to the container:

And this is what it looked like:

The items are stretched. This is the default behavior when you add display: flex;
The align-items property aligns them vertically. When it's set to center they're vertically centered:

This is the default value:

align-items: flex-end; will place them at the bottom of the container:

align-items: flex-start; will place them at the top:

The items don't break into multiple lines. I added more items to show you how to make them wrap:

I added flex-wrap: wrap; to the container. It will make them wrap onto multiple lines:

flex-wrap: nowrap; is the default value when you add display: flex;

I removed the gap and changed the names of these three classes to show you how to make elements bigger than the others when there's available space:

I'll show you flex-grow. box1 gets flex-grow: 1;
box2 gets flex-grow: 2;
box3 gets flex-grow: 3;
This is what the styling looks like:

box3 got three parts of the space that is not needed, box2 got two and box1 got one:

I added another container with a class called container2 with 3 divs inside with classes named child to show you the flex-basis property:

This is the styling for container2:

I also added a gap to the container. This is the styling for the items and what they look like:

This is what they look like with flex-basis: 20px;

This is what they look like with flex-basis: 50px;

And this the items with flex-basis: 100px;

flex-basis changes the length of the elements.
flex-basis: auto; is the default value. It depends on the length of the element or its content if length is not set:

The elements can grow if we change the flex-grow property.
I'll change two of the class names and delete flex-basis: auto; to show you flex-shrink. Now the second element is has a class named child1 and the third has a class called child2:

I'll give all divs inside container2 flex-basis: 150; It'll make them so big that there won't be enough room for all of them in the container and they'll have to shrink:

child1 will get flex-shrink: 1;
child2 will get flex-shrink: 2;
and child3 will get flex-shrink: 3;
This is the styling for the divs inside .container:

child3 has to shrink 3 times more than the others. With flex-shrink you can choose how big they should be when they have to shrink:

I'll give the container a height of 100px to show you the property called order:

The first item will get order: 3;

Now it's in the third position. The order property changes the order of the elements:

But if the order of your items is not correct you should change it in the html file. It's not a good idea to use the order property for that.

The align-self property changes the position of one element. I'll give child2 align-self: center; It will position it at the center:

align-self: stretch; will stretch it. That's the default:

align-self: flex-start; will put it at the top of the container:

With align-self set to flex-end the item will be at the bottom of the container: