CSS Flexbox

Question 1

What is Flexbox

Answer 1

One-dimensional layout method for laying out items in rows or columns.

Question 2

Why use Flexbox?

Answer 2

Allows us to distribute space dynamically across elements of an unknown size.

Question 3

How do you turn on flexbox property?

Answer 3

display: flex;

Question 4

What is main axis in flexbox?

Answer 4

By default main axis = x (horizontal left to right but can change)

Question 5

What is cross axis?

Answer 5

By default cross axis = y(vertical top to bottom but can change)

Question 6

Define Flex direction

Answer 6

Allows us to decide the direction of main axis in container.

flex-direction: row; (default)

Question 7

How do you go right to left in direction?

Answer 7

flex-direction: row-reverse;

Question 8

How do you go up to down in direction?

Answer 8

flex-direction: column;

Question 9

How do you go down to up in direction?

Answer 9

flex-direciton: column-reverse;

Question 10

Define justify content

Answer 10

Justify content determines how the actual elements/content is distributed across the main axis. Dependent on how the flex direction is configured.

Question 11

What are the values for the property justify-content:

Answer 11

justify-content: flex-start; **default
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Question 12

Define Flex Wrap

Answer 12

Determines whether elements are going to wrap along main. And dictates the direction of the cross axis.

Question 13

What are the values of flex-wrap:

Answer 13

flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-wrap: nowrap;

Question 14

Define align items.

Answer 14

Distributes space/items along the cross axis.

Question 15

What are the values of align-items:

Answer 15

align-items: flex-start; **default
align-items: flex-end;
align-items: center;
align-items: baseline;