Flexbox Properties

1. Try out all 4 possibilities: row column row-reverse column-reverse
2. figure out what the default value is.

justify-content aligns items along the main axis. It only works if there is extra space.

1. Try out all 6 values: flex-start, flex-end, center, space-between, space-around, space-evenly
2. Try them again with flex-direction: column
3. figure out what the default value is.

align-items aligns items along the cross axis. It only works if there is extra space in the flex-container.

😲 NOTE: I've set height: auto on the flex items because the value stretch only works when a height is not set.

1. try all four values: flex-start, flex-end, center, stretch
2. try them again with flex-direction: column
3. figure out what the default value is.

align-self works exactly the same as align-items except it is applied to flex children directly. In fact, you can think of align-items as just a shortcut for setting all of the align-self of a flex-container's children.

1. Try all three values of align-self for some of the flex items: flex-start, flex-end, center
2. Try them again with a different value for the containers align-items property.
3. change the flex-direction to row and try all three values again

flex-grow determines the rate at which extra space is given to flex items. In this example, child 4 and child 2 are the only items that can grow, but child 4 is snatching up extra space 3 times as fast as child 2.

1. Experiment with different values for flex-grow on various flex items:
2. switch flex-direction and experiment

flex-basis is an ideal, or hypothetical width or height, before any growing or shrinking is applied. Think of it as "what each flex item asks for", but the parent can not always give it what it want.

flex-basis deals with the width dimension if flex-direction: row and height if flex-direction: column.

1. Experiment with different flex-basis amounts, including big numbers and very small numbers, do you understand why things look the way they do?
2. experiment with how flex-basis differs based on the flex-direction property
3. If one of the flex items can grow, does the container still try to respect the requested flex basis? Or does the growing child eat up everything? Figure it out by experimentation
4. what is the default value for flex-grow?

order controls the order that the flex-children are rendered in. You can create any order you want by specifying the order property on the flex items

1. Move "Child 4" to the very front of the line
2. make the order: 2, 4, 6, 8, 1, 3, 5, 7
3. figure out what the default order is
4. flip it to flex-direction: column and move child 5 to the very botom of the area

flex-wrap controls whether the flex children are allowe to wrap to new lines

1. experiment with all of the values: no-wrap, wrap, and wrap-reverse
2. figure out what the default is
3. when flex-wrap is set to no-wrap does justify-content have any effect? Why?
4. set it to flex-wrap: wrap, and now experiment with both justify-content, and align-items. See if it makes sense to you why they work the way they do. See if it makes sense to you why they work the way they do.
5. Set the items to flex-basis: 50px -- can you explain why they don't wrap, even if set to wrap?
6. Finally, set the container to flex-direction: column and repeat the steps above

align-content controls the distribution of lines lines of flex children along the cross-axis. It only has an effect if the children are wrapping onto multiple lines.

1. experiment with all of these values: flex-start, center, flex-end, space-between, space-around, space-evenly, stretch
2. try to explain in your own words the difference between align-content and justify-content