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.

Practice

1. What does setting display: flex; on a container do?

easy

A. It hides the container and its children.

B. It makes the container's text bold.

C. It changes the container's background color.

D. It makes the container a flex container, arranging children in a row or column.

Solution

1. Step 1: Understand the role of display: flex;

   Setting display: flex; on a container activates flexbox layout for its children.

2. Step 2: Effect on child elements

   Children inside a flex container are arranged in a row by default or column if specified.

3. Final Answer:

   It makes the container a flex container, arranging children in a row or column. -> Option D

4. Quick Check:

   Flex container = display: flex [OK]

Hint: Remember: display: flex creates a flexible box container [OK]

Common Mistakes:

• Confusing flex container with hiding elements
• Thinking it changes colors or text styles
• Assuming it only affects text formatting

2. Which of the following is the correct CSS syntax to make a container a flex container?

easy

A. container { display: flex; }

B. container { display: block-flex; }

C. container { flex: display; }

D. container { flex-display: true; }

Solution

1. Step 1: Identify correct CSS property and value

   The correct property to enable flexbox is display with the value flex.

2. Step 2: Check syntax correctness

   container { display: flex; } uses correct CSS syntax: display: flex;. Others are invalid CSS.

3. Final Answer:

   container { display: flex; } -> Option A

4. Quick Check:

   Correct syntax = display: flex [OK]

Hint: Use 'display: flex;' exactly to start flexbox [OK]

Common Mistakes:

• Swapping property and value order
• Using non-existent properties like flex-display
• Adding extra words like 'true' or 'block-flex'

3. Given this CSS and HTML, what will be the layout of the boxes inside the container?

 .container { display: flex; } 
 .box { width: 50px; height: 50px; background: red; margin: 5px; } 

<div class='container'> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div>

medium

A. Boxes arranged horizontally in a row with space between them.

B. Boxes stacked vertically in a column.

C. Boxes overlapping each other in the same spot.

D. Boxes hidden because of missing display property.

Solution

1. Step 1: Analyze the container's display property

   The container has display: flex;, which arranges children in a row by default.

2. Step 2: Understand the boxes' layout

   Each box has fixed size and margin, so they appear side by side with space around them.

3. Final Answer:

   Boxes arranged horizontally in a row with space between them. -> Option A

4. Quick Check:

   Flex default direction = row [OK]

Hint: Flex default direction is row, so children line up horizontally [OK]

Common Mistakes:

• Assuming flex defaults to column
• Thinking boxes overlap without positioning
• Ignoring margin spacing between boxes

4. What is wrong with this CSS if the flex container does not arrange items in a row?

.container {
  display: flex;
  flex-direction: column;
}

medium

A. Flex container needs 'flex-wrap: wrap;' to arrange items.

B. Missing semicolon after display: flex;

C. The value 'column' is wrong; it should be 'row'.

D. Flexbox requires 'display: flexbox;' not 'display: flex;'.

Solution

1. Step 1: Check the flex-direction property value

   The value 'column' arranges children vertically instead of horizontally.

2. Step 2: Correct the value to 'row'

   Changing 'column' to 'row' fixes the layout to arrange items horizontally.

3. Final Answer:

   The value 'column' is wrong; it should be 'row'. -> Option C

4. Quick Check:

   flex-direction: row for horizontal [OK]

Hint: Use 'flex-direction: row' for horizontal layout [OK]

Common Mistakes:

• Using 'column' instead of 'row' for horizontal layout
• Confusing flex and flexbox in display
• Assuming flex-wrap controls direction

5. You want a flex container to stack its child items vertically and center them horizontally. Which CSS achieves this?

hard

A. .container { display: flex; flex-direction: row; justify-content: center; }

B. .container { display: flex; flex-direction: column; align-items: center; }

C. .container { display: flex; flex-wrap: wrap; align-content: center; }

D. .container { display: block; text-align: center; }

Solution

1. Step 1: Set flex-direction to column for vertical stacking

   Using flex-direction: column; stacks children vertically.

2. Step 2: Use align-items: center to center horizontally

   align-items: center; centers items along the cross axis (horizontal in column direction).

3. Final Answer:

   .container { display: flex; flex-direction: column; align-items: center; } -> Option B

4. Quick Check:

   Column + align-items center = vertical stack + horizontal center [OK]

Hint: Use flex-direction column + align-items center for vertical center [OK]

Common Mistakes:

• Using row direction when vertical stack needed
• Confusing justify-content with align-items for cross axis
• Using display block instead of flex