GalinaLK

Posted on Apr 20, 2022

flexbox

#css #html

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:

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: