Flex direction in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property flex-direction control?

It controls the direction in which flex items are placed inside a flex container. It can be row, column, row-reverse, or column-reverse.

beginner

What is the default value of flex-direction?

The default value is row, which means flex items are laid out horizontally from left to right.

beginner

How does flex-direction: column change the layout?

It stacks flex items vertically from top to bottom instead of horizontally.

intermediate

What is the difference between row-reverse and column-reverse?

row-reverse lays out items horizontally but in reverse order (right to left). column-reverse stacks items vertically but from bottom to top.

intermediate

Why is flex-direction useful in responsive design?

It lets you change the layout direction easily on different screen sizes, for example switching from row to column on small screens for better readability.

What happens if you set flex-direction: column on a flex container?

A Flex items stack vertically from top to bottom

B Flex items stack horizontally from left to right

C Flex items disappear

D Flex items overlap each other

Setting flex-direction: column stacks the flex items vertically in the container.

Which flex-direction value lays out items from right to left horizontally?

A row

B row-reverse

C column

D column-reverse

row-reverse reverses the horizontal order, placing items from right to left.

What is the default flex-direction value if none is set?

A column-reverse

B column

C row-reverse

D row

The default is row, which lays out items horizontally left to right.

If you want to stack items vertically but in reverse order (bottom to top), which flex-direction do you use?

A column-reverse

B column

C row-reverse

D row

column-reverse stacks items vertically from bottom to top.

Why might you change flex-direction in a responsive design?

A To change the color of items

B To hide some items

C To change the order and layout direction for better viewing on different screen sizes

D To add animations

Changing flex-direction helps rearrange items for better readability on small or large screens.

Explain what the CSS property flex-direction does and list its possible values.

Think about how items are arranged inside a flex container.

Describe a real-life scenario where changing flex-direction would improve a website's layout on different devices.

Imagine how a menu or list looks on a phone versus a desktop.