CSS Flex-box

Flex-direction-column - What does this property and value do? How will this effect the way we use justify-content and align-items?

flex-direction: column; - This changes the container to layout the items fro top to bottom. This will flip how we use justify-content and align-items. *You need to specify the containers height to control the justify-content.*

Flex - What does this property allow you to do? What kind of values can you put?

Flex - This property allows you to set the width of the items according to the width of the container. 1 or any numbers can be a value - This will give an equal amount of space relative to the container. You can also use pixels, but this is simpler. *The flex property is actually the shorthand for, flex-grow, flex-shrink, and flex-basis.*

order - What is source order independence and does flex box have it? What is the property and values? What is the default order set too?

Flex-box has something called source order independence, meaning you can move around the items regardless of the order set in html. order- This property goes in the item and the value is a number. By default the order is set to zero. So a value above zero will make the item last, and a value below zero will make it first.

Wrapping - What is the property and values that it can take? How do we make the items go to the next line?

Flex-wrap: nowrap; - Flex-box has a default value of no wrap so the items can't go to the next line, meaning you can only have 1 column/ row wrap - Changing the value to wrap will fix this and adjusts the items according to the width of the container.

Flex-box - What must we first do in order to use a flexbox? What property and value do we use to create a flex-box?

In order to use a flexbox layout we must first establish a container, and the items within that container. *Anything can be a container as long as it has items (elements) that are direct children of the container* Display: flex; - Use the display property with a value of flex to make it a flex-box layout. This will automatically line up the elements horizontally as apposed to vertically.

Main axis and Cross axis - What are the axis of a flex-box? Why does it matter? what does the property flex-direction do?

The axis is a core concept when it comes to flexbox. The reason being is flex box always has a direction, by default it's horizontal. main axis - goes from left to right along the row. cross axis - goes from top to bottom *The two axis matter as we use different properties on the main axis and the cross axis.* We can also flip the direction of the flexbox - flex-direction: row - Is the default value column - Will stack the items from top to bottom. *This will also flip the main axis to top from bottom, and the cross axis to left to right.*

Positioning items - What is this technique used for? What property does it use?

This is a technique to adjust single items along the main axis using the margin property. To change a single item, target it, and give it a margin (whichever way) of auto. Ex: margin-left: auto; This will push it all the way to the left.

Align items - What axis does this property allow us to control? What are the values it can take? What property allows you to push a specific item.

This property allows us to control the element along the top and bottom (cross axis). *By default the items stretch themselves along the cross-axis* align-items - This controls the items along the cross axis. stretch; - This is the default value flex-start; - this will push all items to the top. flex-end; - This will push all items to the bottom. center; - This will center the items within the container. align-self - Allows you to push a specific item and takes the same values.

Justify content - What does this property allow you to do? What is the property and what values can it take?

This property allows you to position the items along the main axis as you see fit. Justify-content - This controls the content along the main axis. flex-start; - This is the default / left hand side. flex-end; - This moves it to the end / right hand side. center; - This centers the item. space-around; - This will give equal space accept for along the border. space-between; - This will leave no gaps on the side, just the center. space-evenly - This will evenly space the items out.