Flex container in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a flex container in CSS?

A flex container is an element with display: flex; or display: inline-flex;. It arranges its child elements (flex items) in a flexible way, either in a row or column.

beginner

How do you make an element a flex container?

You set its CSS display property to flex or inline-flex. For example: display: flex;

beginner

What is the default direction of flex items inside a flex container?

The default direction is a horizontal row from left to right, controlled by flex-direction: row;.

beginner

Name two common values for the display property that create a flex container.

The two common values are flex and inline-flex. flex makes a block-level flex container, inline-flex makes an inline-level flex container.

beginner

Why use a flex container instead of normal block layout?

A flex container helps arrange items easily in rows or columns, align them nicely, and distribute space evenly. It adapts well to different screen sizes, making layouts flexible and responsive.

Which CSS property turns an element into a flex container?

A position: flex;

B float: left;

C flex-direction: row;

D display: flex;

Only display: flex; or display: inline-flex; makes an element a flex container.

What is the default direction of flex items inside a flex container?

A Column from top to bottom

B Row from left to right

C Row from right to left

D Column from bottom to top

The default flex-direction is row, which arranges items horizontally from left to right.

Which value of display creates an inline flex container?

A flex-inline-block

B flex-inline

C inline-flex

D inline-block-flex

inline-flex creates a flex container that behaves like an inline element.

What does a flex container help you do?

A Arrange child elements flexibly in rows or columns

B Add colors to text

C Make text bold

D Hide elements

Flex containers arrange their child elements in flexible rows or columns for better layout control.

Which of these is NOT a property of a flex container?

A text-decoration

B align-items

C flex-wrap

D justify-content

text-decoration styles text, not layout. The others control flex container behavior.

Explain what a flex container is and how you create one in CSS.

Think about the CSS property that changes layout behavior.

Describe the default layout direction of flex items inside a flex container and why it is useful.

Consider how items line up by default.