Flexbox and Bootstrap Quiz

Scenario: You set display: flex; on a parent container. What will happen to its direct children?

• They will stack vertically

• They will align in a row by default

• They will remain unaffected

• They will disappear

Scenario: You want items inside a flex container to evenly distribute along the main axis with spaces between them. Which justify-content value should you use?

• space-between

• space-around

• space-evenly

• center

Scenario: You applied flex-grow: 1 to an item inside a flex container. What does this do?

• Shrinks the item

• Expands the item to fill available space

• Centers the item

• Keeps the item at its original size

Scenario: A flex container has align-items: flex-start;. What happens to the child elements?

• They align to the top of the container

• They align to the bottom of the container

• They are centered vertically

• They stretch to fill the height

Scenario: You set flex-wrap: wrap; on a flex container. What effect does this have?

• Items stay in a single line and shrink if necessary

• Items move to the next line when they can’t fit

• Items become stacked

• Items disappear

Scenario: You have align-self: flex-end; on a flex item. What happens?

• The item moves to the bottom of the container

• The item stretches across the container

• The item stays centered

• The item disappears

Scenario: You set order: -1; on a flex item. What does this do?

• Moves the item to the beginning of the container

• Moves the item to the end

• Keeps the item in place

• Ignores the item

Scenario: You want to reverse the order of flex items. What should you use?

• flex-direction: column-reverse;

• flex-wrap: reverse;

• justify-content: end;

• align-items: center;

Scenario: A flex container has justify-content: center;. What happens to its children?

• They are pushed to the start

• They are pushed to the end

• They are centered along the main axis

• They are stacked

Scenario: You set align-content: space-around; in a multi-line flex container. What happens?

• Lines of items are evenly distributed with space around them

• Items stretch to fill the height

• Items align to the start

• Items align to the end