CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox) - Flex Items Properties

The video tutorial covers various properties of flex items in CSS Flexbox, including order, align self, flex grow, flex shrink, and flex basis. It explains how these properties affect the layout and behavior of flex items within a flex container. The tutorial also introduces the shorthand flex property, which combines flex grow, flex shrink, and flex basis. Practical examples demonstrate how these properties can be used to control the positioning and sizing of items in a flexible layout.

What happens to a flex item when its 'order' property is set to a higher value than others?

• It moves to the front of the row.

• It moves to the end of the row.

• It stays in its original position.

• It disappears from the row.

Which property would you use to align a single flex item differently from others?

• align-items

• justify-content

• align-self

• flex-direction

If a flex item has a 'flex-grow' value of 1, what does it mean?

• The item will not grow at all.

• The item will grow to fill available space.

• The item will shrink to fit the container.

• The item will disappear when space is limited.

What is the default value of the 'flex-shrink' property?

• 1

• 2

• 3

• 0

How does the 'flex-basis' property affect a flex item?

• It sets the item's color.

• It aligns the item to the center.

• It determines the item's initial size.

• It changes the item's position.

What does the 'flex' shorthand property combine?

• flex-direction, flex-wrap, and justify-content

• align-items, align-content, and align-self

• flex-grow, flex-shrink, and flex-basis

• order, flex-grow, and flex-shrink

When using 'flex-basis' and 'width' together, which property takes precedence?

• Neither, they are equal

• width

• flex-basis

• It depends on the container