The FlexBox

Transcript

In our last lesson, I used display flex. A tag with display flex does two things. It displays like block, so it takes up 100% of the width of its parent, but it also makes its children display like images. This means its children sit side by side in one row.

Giving a tag the display flex declaration turns the tag into something called a Flexbox. The children of a Flexbox are called flex items. Flexbox can use special CSS properties to change the way its children are arranged.

For example, the justify content property allows you to change the space between flex items. Here's two different values it takes; space around and center. The space around value takes all of the remaining space in the row and cuts it into two equal pieces, one for each item. The first half goes right in the middle of the two items. The second half is cut in half again, one piece goes to the left of the first item, the second piece goes to the right of the second item. The center value is a little more straightforward. Here's center with two flex items. The space is even on both sides of the flex items.

Let's look at another example of space around but this time with three flex items. space around takes the remaining space in the row and cuts it into three equal pieces. The first two pieces go between the items. And the final piece is cut in half and added to the left and right of the first and last items. Finally, let's look at center with three items. Once again, the items are all centered in the middle of the Flexbox with no space between them.

Let me show you how I can use this for my gallery. I'll put the justify content space around Declaration on my main tags. Now, the Flexbox figures out how to distribute the space for me that's how you flex your code muscles.