CSS Flexbox Quiz

How do you turn an element into a Flex Container so its children use Flexbox?

• container { display: block; }

• container { display: inline-block; }

• container { display: flex; }

• container { flex-container: true; }

Which CSS property defines the main axis direction (e.g., row or column) in a flex container?

• flex-grow

• flex-direction

• justify-content

• flex-axis

What is the default flex-direction for a flex container?

• row

• column

• row-reverse

• none

Which property controls how extra space (along the main axis) is distributed between flex items?

• align-items

• flex-wrap

• justify-content

• flex-shrink

Suppose you want items to wrap onto multiple lines instead of squishing into one row. Which property would you use?

• align-content: space-around;

• flex-wrap: wrap;

• justify-content: space-between;

• flex-flow: multiple;

Which property allows you to align items along the cross axis (for instance, vertically if flex-direction is row)?

• justify-content

• align-items

• flex-flow

• order

If you only want to align one specific flex item differently from the others, which property would you use on that item?

• align-self

• justify-self

• flex-direction

• align-items

If flex-direction: column;, which property would you use to center items horizontally?

• align-items: center;

• justify-content: center;

• order: 1;

• align-self: center;