Lesson 41 Flex Intro

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.

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.

lesson 41

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. Maybe start with something like this, just to see. This way there is no pre-formatting involved.

one

two

You can watch this lesson youtube.