flexbox
Tags: css, html
Published: 2022-04-20 12:48:27

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4lh68282w456g5nigz3.png)

This is the styling for the container and the boxes:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adcvchp16fwvp1k8sfi0.png)

And this is what it looks like in the browser:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqcoqogasjxz8qctzkr3.png)

This is what it looks like when you add display: flex;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22lfr04g5txmwdxsyhmf.png)

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jl10pzie6ym3j3yyb33i.png)

flex-direction: column; will make them display as a column:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5d3gdwafroqi6y3p3tt.png)

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: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvlwevtxjpshvowzllvw.png)

The justify-content property changes their position along the main axis. justify-content: center; will place the items at the center of the container:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpzaq2tv8274de2fg6q1.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hxnofjkw0ge0qafx2ag.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l00exbxvgu61qh8b3qyn.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckusxb9h3ucgritb9b76.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy7w1zz3giebd24rgpg9.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz2qupl8jzvtryu6jzpv.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agd8w8a6avphanxppmkf.png)

I added height: 80vh; to the container:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj16zzie7ks4qixxo2sv.png)

And this is what it looked like:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq31cqfsd6sekshvr7ox.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nct8qxko7x0uhoxb3p4g.png)

This is the default value:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj77tq1p8gjmgdqxdw47.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3slf33m8fdc3i649foy.png)

align-items: flex-start; will place them at the top:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftr068vm80oemjzscr6g.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nted5mixb8pvak2rg6wa.png)

I added flex-wrap: wrap; to the container. It will make them wrap onto multiple lines:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4txmph899ztge9ubmn4z.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqgvi955hx4nfqb30qv2.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etnwmtx4gklqlipjt1ji.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snhskxjb6gs5acx1wsd1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrpyd0rtagq8979x396m.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr81wnjbdi2jqo937j8c.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r82uoue40dn8jpgz188.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usfzzqkixr056rxlwzcl.png)

This is the styling for container2:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6lhhcq9w01tjl9weqta.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98jpt5qemc81jdj7tvib.png)

This is what they look like with flex-basis: 20px;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12evwnv7b5fajknwdri5.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx4qqouk8znt94ls03as.png)

And this the items with flex-basis: 100px;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhxsc6txgrpy58579m5b.png)

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqzpyeegzkxnvohgzvja.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bgil1ywl05mpydrfkhr.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l533crxugjoecawke8k4.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghgwh4plirwths19o50p.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pd0c8zpww899fp97l4t.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jfe3k2jkfd55twwwkr2.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky7ezupgib59976rmwln.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sayu24pkhby5og49bd1.png)

The first item will get order: 3;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz6dxguk8ybmtrsjc2wv.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thivogevfpifqhiacsvq.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0k7gcpshjn1imeq2qcx.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mncl5k4rtbfbqeardlsz.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83g8zbpqj55qzx4nj716.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mktus95hyw1jwxklo1l5.png)