Why is Flexbox useful for responsive web design?
A
It adds animations to layouts
B
It makes elements scrollable
C
It allows dynamic resizing and alignment of elements based on screen size
D
It fixes element widths
Analysis & Theory
Flexbox is ideal for responsive design because it lets elements adapt to different screen sizes and spaces.
Which Flexbox property allows items to wrap onto a new line if they don't fit?
D
flex-direction: column;
Analysis & Theory
`flex-wrap: wrap;` makes items wrap to the next line if necessary, useful in responsive layouts.
What combination of properties helps create a responsive Flexbox row layout that wraps?
A
display: inline; flex-grow: 1;
B
display: block; flex-wrap: no-wrap;
C
display: flex; flex-wrap: wrap;
D
position: absolute; justify-content: center;
Analysis & Theory
`display: flex; flex-wrap: wrap;` creates a responsive container where items can wrap if needed.
Which CSS unit is best for responsive sizing in a Flexbox layout?
Analysis & Theory
Percentages (`%`) and relative units like `em`, `rem`, and `vw`/`vh` are best for responsive design.
How can Flexbox be combined with media queries for responsiveness?
A
Use Flexbox only on mobile
B
Use media queries to change flex-direction or alignment based on screen width
C
Flexbox disables media queries
D
They cannot be used together
Analysis & Theory
You can use media queries to adjust Flexbox properties like `flex-direction`, `gap`, or `justify-content` responsively.
What does `flex: 1 1 auto;` do in a responsive layout?
B
Prevents item from shrinking
C
Allows item to grow and shrink with automatic base size
D
Hides the item on small screens
Analysis & Theory
`flex: 1 1 auto;` makes the item flexible to grow and shrink as space allows, with auto basis.
What is a common use of `flex-direction: column;` in responsive design?
C
To stack items vertically on smaller screens
D
To center items horizontally
Analysis & Theory
`flex-direction: column;` is often used in media queries to switch to vertical layout on narrow screens.
Which property helps align flex items to the center regardless of screen size?
B
justify-content: center; align-items: center;
Analysis & Theory
`justify-content: center;` and `align-items: center;` align flex items both horizontally and vertically.
Which layout would work best for a mobile navigation bar using Flexbox?
C
display: flex; flex-direction: column;
Analysis & Theory
For mobile navbars, `flex-direction: column;` stacks items vertically for better fit on narrow screens.
What happens if you use `flex-wrap: wrap` but don’t set width limits on flex items?
A
Items will still wrap automatically
B
Items may overflow the container
D
The layout becomes fixed-width
Analysis & Theory
Without size constraints, items may grow beyond the container width even if wrapping is enabled.