CSS3 FlexBox

Question 1

Define the ‘flex-flow’ attribute.

Answer 1

flex-flow: direction wrap
For example
flex-flow: column-reverse wrap;

Question 2

List the flex ‘main’ and ‘cross’ directions.

Answer 2

row, row-reverse, column, column-reverse

Question 3

What is the default direction?

Answer 3

row (horizontal)

Question 4

Define ‘justify-content’.

Answer 4

Aligns along the main axis with either flex-start (default), flex-end, center, space-between, or space-around.

Question 5

List four kinds of alignments.

Answer 5

justify-content, align-content, align-item, align-self

Question 6

What are the kinds of flex-direction settings?

Answer 6

row and column (row, row-reverse, column, column-reverse)

Question 7

What is the difference between flex and inline-flex?

Answer 7

Flex consumes the entire horizontal line while inline-flex only wraps the flex-items it contains.

Question 8

Define align-self.

Answer 8

Aligns only the specified item as flex-start, flex-end, center, stretch, or baseline.

Question 9

How to allow flex-items to wrap if there isn’t enough room?

Answer 9

flex-wrap: wrap;

Question 10

How does flex-grow affect the sizing if there isn’t enough room?

Answer 10

The sizing remains the same as the flex-basis.

Question 11

Does the ‘order’ grouping change the logical (tabbed) order?

Answer 11

No.

Question 12

Define ‘align-item’.

Answer 12

The items are aligned according to flex-start, flex-end, center, stretch, or baseline.

Question 13

Define the ‘flex’ attribute.

Answer 13

flex: grow shrink basis
Example
flex: 0 1 2em

Question 14

How do you set up a div to be a flex box container?

Answer 14

CSS: .container {
display: flex;
}

Question 15

What are the kinds of flex-direction settings?

Answer 15

row and column (row, row-reverse, column, column-reverse)

Question 16

How to prevent items from wrapping in a row when there isn’t enough room?

Answer 16

flex-wrap: nowrap

Question 17

Can you set the ‘grow’ value for the container, the item, or both?

Answer 17

Both

Question 18

What is the default ‘order’ grouping value?

Answer 18

Zero

Question 19

What is the vertical axis called?

Answer 19

Cross axis

Question 20

What is the default ‘flex-grow’ value?

Answer 20

One

Question 21

What is a basis of ‘auto’?

Answer 21

Set the size to the defaults.

Question 22

Define ‘align-content’.

Answer 22

The same as justify-content on it applies to the cross-axis AND it only applies to multi-line content.
It aligns the entire content according to flex-start, flex-end, center, space-between, space around, stretch (default), or baseline.

Question 23

What are the objects in a flex box container called?

Answer 23

flex items

Question 24

What is the wrapper around flex blocks called?

Answer 24

Container

Question 25

What is the horizontal axis called?

Answer 25

Main axis