Flex is a tool that makes your website more flexible. You want your website to look good on a TV and on a cell phone. It needs to stretch and compact. Flex automatically puts things in the center, no matter how big your screen is. Flex can align things in a column. Flex can add space between items, pushing things to the right and left of the screen no matter what screen is being used.

You can look at this page and change your screen size, dragging it in and out and see how the site flexes, changes with the size of the screen.

To use flex, you need to think about a box. Flex affects the things in the box, not the box itself. You create a div, like header, and then give it the property of flex. Then everything in that div will be affected. You can, for instance, tell it to be centered or to spread out. Here’s an example.

CSS assigns the value flex to the property display for the selector flexbox. It looks like this.

#flexbox {

display: flex;

};

Then you can add in what you want it to do.

#flexbox {

display: flex;

justify-content: center;

};

That would put the image and menu next to each other in the center.

justify-content: space-between;

That would space them apart on the page.

justify-content: space around;

That would put space between but not push them to the far edges of the page. It would introduce a margin on the outside of each.

justify-content: flex-start;

That would align everything together starting on the left edge of the page.

justify content: flex-end

That would align everything together over on the right edge of the page.

Play with it to see what happens.

You can watch this lesson.