Skip to content
cssintermediate

CSS Flexbox

Flexible box layout

7 questions

By EZ4Code Team

1. Which property enables flex layout?

display: flex
display: block
position: flex
flex: on
Explanation: Setting display: flex on the parent element enables flex layout; child elements become flex items.

2. What does justify-content control?

Alignment and space distribution along the main axis
Cross-axis alignment
Wrapping behavior
Arrangement direction
Explanation: justify-content controls alignment along the main axis, such as flex-start/center/space-between/space-around.

3. What does align-items control?

Alignment along the cross axis
Main axis alignment
Wrapping
Order
Explanation: align-items controls the alignment of flex items along the cross axis, such as stretch/center/flex-start/baseline.

4. What is flex: 1 equivalent to?

flex: 1 1 0%
flex: 0 1 auto
flex: 1 0 auto
flex: 0 0 0%
Explanation: flex: 1 is equivalent to flex: 1 1 0%, i.e., flex-grow:1, flex-shrink:1, flex-basis:0%; the element evenly shares the remaining space.

5. What does flex-direction: column do?

The main axis becomes vertical, elements arranged from top to bottom
Elements arranged horizontally
Elements reversed
Elements wrap
Explanation: flex-direction: column sets the main axis to vertical; flex items are arranged from top to bottom.

6. What does flex-wrap: wrap do?

Allows child elements to wrap
Prevents wrapping
Reverses order
Centers elements
Explanation: flex-wrap: wrap allows flex items to wrap when space is insufficient; default nowrap does not wrap and will compress elements.

7. What is the difference between flex-grow and flex-shrink?

grow controls distribution of remaining space; shrink controls the shrink ratio when space is insufficient
They are identical
grow controls shrinking
shrink controls growing
Explanation: flex-grow defines the ratio for distributing remaining space; flex-shrink defines the shrink ratio when space is insufficient; flex-basis defines the initial size.

More css Quizzes

CSS Basics Quiz

beginner

Selectors, properties, colors, box model, and core CSS concepts.

CSS Layout Quiz

intermediate

Flexbox, Grid, positioning, responsive design, and modern CSS layout.

CSS Grid Layout

intermediate

Two-dimensional grid layout

CSS Animations and Transitions

advanced

transition, animation and keyframes