Big Bad Guide to the Flexbox Model Worksheet

Welcome to Flexbox!

Ready to learn a powerful display property that will allow you to position multiple items with a single property, specify how the items will be spaced out without adding margin or padding, and can be used both horizontally and vertically? Fantastic!! Flexbox is a display property with a set of properties and values that allow you to create modern, responsive layouts for websites. And after completing the Big Bad Guide to the Flexbox Model Worksheet you'll be on your way to becoming a Flexbox master!

The first thing you'll notice when you open the Big Bad Guide to the Flexbox Model Worksheet is that there are a lot of Flexbox properties and each one has multiple values. 😰 No worries! As you complete the worksheet, you'll start to get a feel for how to use Flexbox. 😁 Let's get started!!

Flexbox Rules

There are a few things to keep in mind when using Flexbox to lay out your site:

  • To use Flexbox, start by adding display: flex; to the parent container creating a flex parent container.
  • Changing the display property to flex gives us access to Flexbox properties.
  • Flexbox has both container and item properties. Container properties are added to the flex parent container (the one we just added display: flex; to.) And item properties are added to child flex items of the parent container.
  • Flexbox works with the width and height properties. The Flexbox properties say where the content is positioned and how to divvy up any space remaining in the container.
  • Adding display: flex; changes the default orientation of the child flex items to row. It moves all of the flex child items to a single row and each of the child flex items are only as wide as its content. Adding flex-flow: row wrap; or flex-wrap: wrap; along with a width for the contents creates a flexible, responsive layout.
  • Flexbox is both horizontally and vertically orientated, allowing for complex layouts.

How to complete the worksheet

  • When you start each lesson you'll be prompted on which section of the worksheet to complete.
  • In the main.css file, use the comments to find the section for each Flexbox property. We've added all of the code blocks you'll need. You'll add the Flexbox properties and values.
  • The first step is to center the content-wrapper for the section. Start by adding display: flex;. Then center the content-wrapper with justify-content: center;.
    • The "content-wrapper" has a purple background Purple which matches the color you'll see when you use DevTools.
  • Then add the code for each Flexbox property and value. Start by adding display: flex;. Notice how the class name is a bit wordy? It contains the Flexbox property and its value.
    • For instance, in the .justify-content-center-parent-container code block, add display: flex; and justify-content: center; (leaving off the parent-container part.)
    • The content boxes are blue Blue which lines up with the color for content in DevTools.

Flex Container Properties

A Flexbox layout begins with a parent container. We use Flexbox container properties to arrange the child flex items within the parent container. Container properties also specify what happens to any extra space within the parent container, reducing the need to add margin or padding. 🙌

  • Add display: flex; first to turn an element into a parent flex container
  • Flexbox container properties are added to the parent flex container to position its child (or children.)
  • Decendents (grandchilden, great-grandchilren) don't inherit the grandparent's Flexbox styles. They need their own parent flex container.

Flex Item Properties

After laying out the child items within the parent container, sometimes you need to change the position of a specific child flex item. That's where item properties come in. They can overwrite the container property for a child flex item.

  • Before adding a flex item property to a flex child item, add display: flex; to the parent container. This will make Flexbox properties available.

Flexbox Container properties:

justify-content:

Adding the justify-content property to the parent container positions child flex items along the main axis. This means that if the main axis is horizontal, our content will be laid out in a row ➡︎ from left to right. If the orientation is changed to column, the child flex items will be vertical, from top to bottom ⬇︎.

The justify-content property also specifies how any extra space in the parent container is divided around and between the items.

When using the justify-content property in row orientation, we rarely need to add margin and padding on the left and right of our content.

The default value for justify-content is flex-start.

justify-content: center;

Positions elements in the center of the parent container. Any space within the container, not taken up by the content, will be evenly divided on the outside of the items without any spacing between the elements.

justify-content: space-between;

The first and last item touch the edge of the parent container. Any space within the container, not taken up by the content will be divided evenly between the items.

justify-content: space-around;

The items are positioned within the container with the extra space divided evenly around each item.

justify-content: space-evenly;

This value is very similar to space-around. The extra space is divided so that there is the same amount of space between the edge of the parent container and each item.

justify-content: flex-start;

Positions elements at the beginning of the container. If our main axis is horizontal, it will position it to the left. If it is vertical, it will position it at the top.

justify-content: flex-end;

Positions elements at the end of the container. If our main axis is horizontal, it will position it to the right. If our main axis is vertical, it will position it at the bottom.

align-items:

Adding the align-items property to the parent container positions child items along the cross axis. If the main axis is horizontal, the cross axis is vertical from top to bottom ⬇︎. And if the main axis is vertical, the cross axis is horizontal from left to right ➡︎. The align-items property acts exactly like justify-content, except that it aligns your elements along the cross axis. Pretty sweet!

The default value of align-items is stretch.

align-items: center;

Positions elements in the center of the parent container along the cross axis. Any space within the container, not taken up by the content, will be evenly divided on the outside of the items without any spacing between the elements.

↓
--
↑

At the content's center

align-items: stretch;

Child flex items stretch to fill the parent container.

↑
↓

Stretch to fill the container

align-items: baseline;

Items are aligned at the content's baseline. This is helpful for aligning items of different heights or font-sizes at the bottom of an image or first line of text.

If there are multiple lines of text of the same font-size the baseline is the bottom of the first row of text.

__

At the baseline

align-items: flex-start;

Positions elements at the beginning of the container. If the cross axis is vertical, it will position it at the top. If it is horizontal, it will position it to the left.

↑
↑

At the start of the container

align-items: flex-end;

Positions elements at the end of the container. If the cross axis is vertical, it will position it at the bottom. If the cross axis is horizontal, it will position it to the right.

↓
↓

At the end of the container

flex-wrap:

The flex-wrap property gives us the ability to create a grid layout. By default, adding display: flex; to the parent container moves all of the child items to a single row along the main axis. The flex-wrap property dictates whether the items should wrap to the next row or not. We use the flex-wrap property along with the width property so that, as each row fills, the next item wraps to the next row.

flex-wrap: nowrap;

The default value for flex-wrap. All of the items are in the same row on the main axis.

1

2

3

4

5

6

flex-wrap: wrap;

Using the width of the items and the parent container, as each row fills, the next item wraps to the next row. The items are on the main axis and wrap from top to bottom.

1

2

3

4

5

6

flex-wrap: wrap-reverse;

Using the width of the items and the parent container, as each row fills, the next item wraps to the next row. The items are on the main axis and wrap from bottom to top.

1

2

3

4

5

6

align-content:

Adding the align-content property to the parent container positions child items along the cross axis. The align-content property has the same values as justify-content, but is used with the flex-wrap property when multiple child items are on more than one row or column within the same parent Flex container. If you do not have wrapped content (i.e., more than one row), align-content will have no effect.

When in the default row orientation, the cross axis will be vertical, from top to bottom ⬇︎. If the orientation is changed to column, the cross axis will be horizontal, from left to right ➡︎.

align-content: center;

The elements are gathered in the center with any extra space on the outside.

align-content: space-between;

Any extra space in the container is placed between the wrapped rows within the parent container.

align-content: space-around;

Any extra space in the container is placed around the wrapped rows within the parent container.

align-content: space-evenly;

Any extra space in the container is spaced evenly around the wrapped rows within the parent container.

align-content: stretch;

Items fill the cross axis. Items with a fixed height can overflow their parent container.

align-content: flex-start;

Items are gathered at the beginning of the parent container.

align-content: flex-end;

Items are gathered at the end of the parent container.

gap:

It's great that we have Flexbox properties like justify-content, align-items, and align-content to lay out our sites. These properties both position the content and say where the extra space in the container goes. There's another set of Flexbox properties that can be used to add spacing between elements in both the main and cross axis - the gap, row-gap, and column-gap properties. (Similar to adding margin between flex items.)

If gap is used along with a Flexbox property like justify-content: space-between;, the gap will be the minimum space between the flex items.

gap

The gap property adds space between both rows and columns.

row-gap

The row-gap property adds space between rows.

column-gap

The column-gap property adds space between columns.

flex-direction:

Adding the flex-direction property to the parent container specifies whether the main axis is row ➡︎ or column ⬇︎. When you add display: flex; to the parent container, the flex child items will move to the default row orientation along the main axis.

These examples show flex-direction changed from the default of row to column. The justify-content property is aligning content along the main axis which is vertical from top to bottom. And the align-items property is aligning content along the cross axis which is horizontal from left to right.

All examples are aligned to the center on the cross axis ➡︎ with align-items: center;.

flex-direction: column;
justify-content: center;

Positions elements in the center of the parent container. Any space within the container, not taken up by the content, will be evenly divided on the outside of the items without any spacing between the elements.

flex-direction: column;
justify-content: space-between;

The first and last item touch the edge of the parent container. Any space within the container, not taken up by the content will be divided evenly between the items.

flex-direction: column;
justify-content: space-around;

The items are positioned within the container with the extra space divided evenly around each item.

flex-direction: column;
justify-content: space-evenly;

This value is very similar to space-around. The extra space is divided so that there is the same amount of space between the edge of the parent container and each item.

flex-direction: column;
justify-content: flex-start;

Positions elements at the beginning of the container. When the flex-direction value is column, the child items will be at the top of the container.

flex-direction: column;
justify-content: flex-end;

Positions elements at the end of the container. When the flex-direction value is column, the child items will be at the bottom of the container.

flex-flow:

The flex-flow property combines the flex-direction and the flex-wrap properties. The flex-flow property is a shorthand property that combines both into one handy line of CSS. The first value is the flex-direction and the second is the flex-wrap value.

Notice there isn't a hyphen between the values for flex-direction and flex-wrap.

flex-flow: row nowrap;

The default layout when adding display: flex; to the parent container. All elements are on the same row. And the size of each element is based on its content, not the width added to each child flex item.

1

2

3

4

5

6

flex-flow: row wrap;

How many child flex items fit on a row is based on the width of the flex parent container and of the child flex items. When the child flex items fill a row, the next child flex item wraps to the next row. Each of the child flex items in the example has a width of 30%, so only 3 will fit on a single row.

1

2

3

4

5

6

flex-flow: row wrap-reverse;

The wrapping is the same as flex-flow: row wrap; but the child flex items start in the lower left corner. After filling a row, the next item starts on the row above.

1

2

3

4

5

6

flex-flow: column nowrap;

Child flex items form a column at the default, flex-start. The height of the container grows to fit the child flex items. If the container has a fixed height, the child flex items will break through the container.

1

2

3

4

flex-flow: column wrap;

The child flex items line up in columns. How many child flex items fit on a row is based on the height of the flex parent container and of the child flex items. When the child flex items fill a column, the next child flex item wraps to the next column.

1

2

3

4

5

6

flex-flow: column wrap-reverse;

The wrapping is the same as flex-flow: column wrap; but the child flex items start in the upper right corner. After filling a column, the next item starts on the column to the left.

1

2

3

4

5

6

Flexbox Item properties:

flex:

The flex property is three properties in one. It is a shorthand property that includes flex-grow, flex-shrink, and flex-basis. It's applied to child flex items along the main axis.

The flex property dictates the length of the element, relative to the rest of the elements inside the container. When you add display: flex; to the parent container, the default flex values are flex: 0 1 auto;.

  • The first value is the flex-grow property with a default value of 0.
  • The second value is the flex-shrink property with a default value of 1.
  • The third value is the flex-basis property with a default value of auto.

Changing the value of any of these properties determines the size of a child flex item as the size of the window grows and shrinks. If you don't change the flex property values, you don't need to add flex to your CSS.

default

The default flex values of flex: 0 1 auto; mean that the content is the size its set to in CSS (the flex-basis.) Each child flex item will shrink at the same rate (flex-shrink.) And the child flex items will not grow beyond the width they've been set to (flex-grow.)

To see how flex works, resize the browser window.

flex-basis

The flex-basis property sets the optimum width to a flex child item. The default value of auto means that the flex child items are the size of their content. Changing the flex-basis property's value sets the width of the child item (in row orientation.) And as long as there is enough space, the child flex item will be that width. The other child items withing the parent container with the default flex-basis of auto will shrink based on their flex-shrink value.

The flex-basis property is very similar to the width property, although flex-basis can overwrite the width property.

If the parent flex container is too small to fit the width set with flex-basis, it will shrink based on its flex-shrink value. Try reducing the width of the browser window. The center child flex item continues to be 600px until the parent flex container is too small to maintain this width.

flex-basis: 600px;

flex-shrink

The flex-shrink property controls how a flex child item shrinks when the browser window becomes more narrow. The default value is 1 - so when the flex parent container is smaller than the total width of the flex child items, they'll shrink evenly.

Let's say we have a flex parent container that is 1200px wide and three child flex items that are each 400px wide - filling the parent flex container. If the parent container shrinks to 900px, the parent container loses 300px of space. All flex child items will lose 100px and shrink to 300px by default. We can use the flex-shrink property so that a flex child item can shrink at a different rate than its siblings.

If one flex child element has a flex-shrink value of 1, a second flex child element has a flex-shrink value of 2, and a third has a flex-shrink value of 0, the child flex items will shrink at different rates. The 300px of lost space is divided into 3 equal shares of 100px (1 + 2 + 0). The first item shrinks by 1 share (100px) and is 300px wide. The second shrinks by 2 shares (200px) and is 200px wide. The third doesn't shrink at all and is stll 400px wide.

A common way flex-shink is used is to set the flex-shrink value to 0 so that the flex child item doesn't shrink. If the parent flex container becomes smaller than the width of the child flex item, the item will "break out" of the container causing an overflow.

Try making the browser window smaller. The width of the center box will stay the same (it's width should be 200px on mobile, 400px on tablet, and 800px on desktop.) The outer boxes will shrink in size. You can use DevTools to inspect the width of the center box as you resize the window.

flex-shrink: 0;

flex-grow

The flex-grow property controls how much of the extra space within a parent flex container a flex child item takes up. With a default value of 0, child items stay the size they're set to, even if there's additional space within the parent container.

To take up the space within the parent container, the flex-grow values of all of the flex child items are added together and the extra space is divided into shares. If there is 400px of extra space in the parent container with three flex child items, and two of them have a flex-grow value of 1 and the third has the default value of 0, the 400px of extra space is divided into 2 shares (1 + 1 + 0). The two child items with a flex-grow value of 1 get a single share of the extra space - 200px. The third child item with the default value of 0 doesn't take up any of the extra space

If a single flex child item has a value of 1 and all others have a value of 0, the flex child item with a value of 1 takes all of the extra space. Using DevTools, try clicking the flex-grow property off and on to see the width of the center container change.

flex-grow: 1;

flex-basis column

flex-basis sets the box's height as long as there's enough height.

When the height of the parent container is less than the flex-basis value, the child flex item will shrink at the rate set by the flex-shrink value.

flex-basis: 800px;

flex-shrink column

The height of the second box is mobile and tablet - 75px, and desktop - 120px.

If the height of the parent container shrinks, the second column's height will not change and will overflow its container. Try it out in DevTools.

flex-shrink: 0;

flex-grow column

The height of the second box is set with the flex-grow property, taking up any extra space in the parent flex container.

If more than one child flex item has a flex-grow value greater than 0, it will share the extra space.

flex-grow: 1;

order:

Adding the order property to a child flex item allows you to change the order of the items within the parent flex container. Each child flex item is given a number to specify its new position. Keep in mind that a screen reader will read the elements in the order they appear in your HTML. To make the site accessible, we want to avoid changing the order of elements if they require any input from the user like buttons or input fields.

The default value is 0.

before

The child flex items are in the same order they are in the HTML.

1

2

3

4

5

after

Using the Flexbox order property, the boxes are rearranged.

1

2

3

4

5

align-self:

The align-self property overwrites the align-items container property for a child flex item.

before

The flex parent container's align-items: center; property means that all three flex child items are aligned at their centers. (We've also added justify-content: space-around; to the parent container.)

Tart croissant tootsie roll.

Tart croissant tootsie roll danish sweet roll halvah.

Tart croissant tootsie roll danish sweet roll halvah. Gingerbread chocolate bar.

after

Using the Flexbox align-self property to overwrite the align-items property allows us to position the boxes individually.

auto maintains the same align-items position.

align-self: auto;
Tart croissant tootsie roll.

align-self: flex-start;
Tart croissant tootsie roll danish sweet roll halvah.

align-self: flex-end;
Tart croissant tootsie roll danish sweet roll halvah. Gingerbread chocolate bar.

after

Using the Flexbox align-self property to overwrite the align-items property allows us to position the boxes individually.

align-self: center;
Tart croissant tootsie roll.

align-self: baseline;
Tart croissant tootsie roll danish sweet roll halvah.

align-self: stetch;
Tart croissant tootsie roll danish sweet roll halvah. Gingerbread chocolate bar.