Flexbox

Question 1

How do we turn an element into a flexbox container?

Answer 1

We set its display property to flex.

Question 2

What is the default direction for a flex container?

Answer 2

The default direction is row.

Question 3

How do we change the direction of our flexbox?

Answer 3

flex-direction: value

Question 4

What is the default width for the direct children of a flexbox container?

Answer 4

Direct children will attempt to be as small as they can be to contain their content.

Question 5

What is the element with display: flex; called

Answer 5

It is called the flex container

Question 6

What are the direct children of a flex container called?

Answer 6

They are called flex items

Question 7

Can flex items overflow their flex container?

Answer 7

Yes, if there is not enough space to hold the flex items, they will overflow their flex container and will cause a horizontal scroll.

Question 8

What is the default behavior for flex-wrap in a flex container?

Answer 8

The default is flex-wrap: nowrap;

Question 9

How can we increase the space between flex-items?

Answer 9

We can use gap.

Question 10

How could we use a combinator to increase space between flex items?

Answer 10

We could use the adjacent sibling combinator and select our flex items.

.col + .col

and then introduce a margin-left: declaration to space them

Question 11

How tall will flexbox items become by default.

Answer 11

Flexbox items will stretch along the row to equal the height of the tallest column content.

Question 12

How could we prevent an image from stretching when we place it in a flexbox row?

Answer 12

Would could set the align-self property to flex-start

align-self: flex-start;

Question 13

What justify property is available to use in Flexbox?

Answer 13

Flexbox uses the justify-content property on the flex-container.

Question 14

What does the justify-content property control in flexbox?

Answer 14

The justify-content property controls how flex items are spaced along the main axis.

Question 15

Can we set widths to flex items?

Answer 15

Yes, although we should:

• set them in percentages
• have the total percentages equal < 100%

Question 16

Where do we use align-self in flexbox?

Answer 16

We use align-self on a flexbox item that we want to specifically control the position of on the cross-axis.

Question 17

If we have divs inside of a flex container, and content within those divs, what elements are the flex-items?

Answer 17

The outer div would be considered the flex-items in this case, the content would not be affected by flex properties themselves