CSS Flexbox

Question 1

display: flex

Answer 1

Adding this to an element turns it into a flex container.

Question 2

flex-direction

Answer 2

Used to align any children of that element into rows or columns.

Question 3

flex-direction options

Answer 3

• Row
• Column
• Row-reverse
• Column-reverse

Question 4

justify-content:

Answer 4

A property used to align and space-out flex-items a certain way. It aligns flex items along the main axis.

Question 5

justify-content: flex-start;

Answer 5

aligns items 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.

Question 6

justify-content: center;

Answer 6

aligns all the flex items to the center inside the flex container.

Question 7

justify-content: flex-end;

Answer 7

aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.

Question 8

justify-content: space-between;

Answer 8

aligns 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. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.

Question 9

justify-content: space-around;

Answer 9

similar to space-between but 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.

Question 10

justify-content: space-evenly;

Answer 10

Distributes space evenly between the flex items with a full space at either end of the flex container.

Question 11

align-items:

Answer 11

A proper that is similar to justify-content. However it aligns flex items via the cross -axis which is the opposite of the main axis that justify-content uses.

Question 12

align-items: flex-start;

Answer 12

aligns items 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.

Question 13

align-items: flex-end;

Answer 13

aligns items 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.

Question 14

align-items: center;

Answer 14

align items 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 items).

Question 15

align-items: stretch;

Answer 15

stretch the items 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.

Question 16

align-items: baseline;

Answer 16

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

Question 17

flex-wrap:

Answer 17

Tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.

Question 18

flex-wrap: nowrap;

Answer 18

Default setting for flex-wrap, doesn’t not wrap items.

Question 19

flex-wrap: wrap;

Answer 19

wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.

Question 20

flex-wrap: wrap-reverse;

Answer 20

wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column.

Question 21

flex-shrink:

Answer 21

A property that allows flex items to shrink if the flex-container is too small.

Question 22

flex-shrink values

Answer 22

The flex-shrink property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, 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.

Question 23

flex-grow:

Answer 23

The opposite of the flex-shrink property. Flex-grow controls the size of items when the parent container expands.

Question 24

flex-basis

Answer 24

A property that specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.

Question 25

flex:

Answer 25

A shortcut to set flex-grow, shrink, and basis all at once.

For example, flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.

Question 26

order:

Answer 26

Used to tell CSS the order of how flex items appear in the flex container.

Question 27

align-self:

Answer 27

A property that allows you to adjust each item’s alignment individually.
It accepts the same values as align-items, and will override any value set by it.