CSS Flexbox

T or F: if one item has a *flex-shrink* value of 1 and the other has a flex-shrink value of 3, the one with the value of 3 will shrink three times as much as the other.

True

How would you align items to their baselines? Baseline is a text concept, think of it as the line that the letters sit on.

align-items: baseline;

How would you align items (on the cross axis) to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).

align-items: center;

How would you aligns items (on the cross axis) to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.

align-items: flex-end;

How would you aligns items (on the cross axis) to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.

align-items: flex-start;

How would you stretch the items (on the cross axis) to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no align-items value is specified.

align-items: stretch;

Which property allows you to *adjust each item's alignment individually*, instead of setting them all at once and will accept the same values as align-items and will override any value set by the align-items property?

align-self

How do you enable flex properties on an element?

display: flex;

How would you specify the *initial size* of the item before CSS makes adjustments with flex-shrink or flex-grow?

flex-basis

How do you ensure an element does not wrap items.

flex-wrap: nowrap;

How do you wrap items from right-to-left if they are in a row, or bottom-to-top if they are in a column?

flex-wrap: wrap-reverse;

How do you wrap items from left-to-right if they are in a row, or top-to-bottom if they are in a column.

flex-wrap: wrap;

How would you align all the flex items (on the main axis) to the center inside a flex container?

justify-content: center;

How would you align items (on the main axis) to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no justify-content is specified.

justify-content: flex-start;

How would you align items (on the main axis) such that the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container?

justify-content: space-around;

How would you align items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container?

justify-content: space-between;

How would you distribute (on the main axis) space evenly between the flex items with a full space at either end of the flex container?

justify-content: space-evenly;

What is the default value for the *flex-direction* property?

row

What are the two options for the *flex-direction* property?

row and column

How would you align two boxes in a horizontal row and *reverse* their order?

set the *flex-direction* property of their parent item to *row-reverse*

How would you reverse the order that two boxes appear in the source HTML?

use the flex *order* property on each box

T or F: if one item has a *flex-grow* value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.

True

T or F: Flex was primarily created to *replace float* in css.

True

T or F: Flex makes it possible to align any children of that element into rows or columns.

True