ReactJS Interview Prep - CSS Fundamentals (Part 2)

Question 1

What does applying `display: flex;` to an element do?

Accepted Answer

Correct Answer

Answer

It forces the element to stretch to the full width of the viewport.

Answer

It makes the element a flex container, and its direct children automatically become flex items, establishing a flex formatting context.

Answer

It centers the element vertically on the page.

Answer

It enables CSS animations on all child elements.

Question 2

In a standard flex container (default `flex-direction: row`), which property aligns items along the horizontal axis (Main Axis)?

Accepted Answer

Correct Answer

Answer

`align-items`

Answer

`justify-content`

Answer

`align-content`

Answer

`place-items`

Question 3

In a standard flex container (default `flex-direction: row`), which property aligns items along the vertical axis (Cross Axis)?

Accepted Answer

Correct Answer

Answer

`justify-content`

Answer

`align-items`

Answer

`flex-wrap`

Answer

`vertical-align`

Question 4

What happens when you change `flex-direction` from `row` to `column`?

Accepted Answer

Correct Answer

Answer

The flex items become block-level elements and ignore flexbox rules.

Answer

The Main Axis becomes vertical and the Cross Axis becomes horizontal, meaning `justify-content` now aligns items vertically.

Answer

The flex items are wrapped onto multiple lines automatically.

Answer

The container is forced to take up 100% of the viewport height.

Question 5

Which `justify-content` value distributes items evenly, with the first item flush to the start edge and the last item flush to the end edge?

Accepted Answer

Correct Answer

Answer

`space-around`

Answer

`space-evenly`

Answer

`space-between`

Answer

`center`

Question 6

What does the `flex-wrap` property control?

Accepted Answer

Correct Answer

Answer

It wraps text inside the flex items to prevent overflow.

Answer

It dictates whether flex items are forced onto a single line or can wrap onto multiple lines if they exceed the container's width.

Answer

It wraps the entire flex container inside a new `

`.

Answer

It applies a visual border around the flex container.

Question 7

What is the purpose of the `align-content` property?

Accepted Answer

Correct Answer

Answer

It aligns text inside individual flex items.

Answer

It aligns the entire flex container within its parent element.

Answer

It aligns multiple *lines* of flex items along the Cross Axis when there is extra space in the container (only works when `flex-wrap: wrap` is active).

Answer

It is a shorthand for `align-items` and `justify-content`.

Question 8

The CSS `flex` property is a shorthand for which three properties (in order)?

Accepted Answer

Correct Answer

Answer

`flex-direction`, `flex-wrap`, `flex-flow`

Answer

`flex-grow`, `flex-shrink`, `flex-basis`

Answer

`flex-align`, `flex-justify`, `flex-content`

Answer

`flex-basis`, `flex-grow`, `flex-shrink`

Question 9

What does the `flex-grow` property do?

Accepted Answer

Correct Answer

Answer

It specifies the font size growth rate for responsive typography.

Answer

It defines the ability for a flex item to grow if necessary, dictating what proportion of the *available positive space* it should take up compared to its siblings.

Answer

It scales the element's padding dynamically.

Answer

It forces the element to take up 100% of the screen width.

Question 10

What is the function of the `flex-shrink` property?

Accepted Answer

Correct Answer

Answer

It dictates how small the font size can get before becoming illegible.

Answer

It specifies the element's ability to shrink if necessary when the container is smaller than the combined size of the flex items.

Answer

It applies a CSS transform scale effect.

Answer

It collapses the margins of the flex item.

Question 11

What does the `flex-basis` property define?

Accepted Answer

Correct Answer

Answer

The base color theme of the flex container.

Answer

The minimum width an element is allowed to reach.

Answer

The initial main size (width or height, depending on flex-direction) of a flex item before free space is distributed according to flex factors.

Answer

The default alignment for items within the container.

Question 12

How do you completely center a single child element both horizontally and vertically inside a full-screen parent container using Flexbox?

Accepted Answer

Correct Answer

Answer

Parent: `display: flex; center-align: true;`

Answer

Parent: `display: flex; justify-content: center; align-items: center; height: 100vh;`

Answer

Parent: `display: block; margin: auto auto;`

Answer

Child: `display: flex; center: both;`

Question 13

What is a practical use case for the `order` property on a flex item?

Accepted Answer

Correct Answer

Answer

To dictate the z-index stacking context.

Answer

To easily rearrange the visual sequence of elements on the screen without changing the underlying HTML DOM structure (great for responsive design).

Answer

To determine the sequence in which JavaScript variables are evaluated.

Answer

To arrange CSS stylesheets based on priority.

Question 14

What does `align-self` do?

Accepted Answer

Correct Answer

Answer

It aligns the flex container to the viewport.

Answer

It is used on a *flex item* to override the container's `align-items` value for that specific item alone.

Answer

It recursively aligns all text nodes within an element.

Answer

It forces an element to align to the right side of the screen.

Question 15

If a flex container has `flex-direction: row-reverse`, how does `justify-content: flex-start` behave?

Accepted Answer

Correct Answer

Answer

Items are aligned to the left edge.

Answer

Items are aligned to the right edge.

Answer

Items are centered.

Answer

The property is ignored when reversed.

Question 16

What does the `gap` property do in Flexbox?

Accepted Answer

Correct Answer

Answer

It creates a transparent hole in the background of the element.

Answer

It specifies the width and height of the flex items.

Answer

It defines the size of the gutter/spacing explicitly *between* flex items, without adding margins to the outside edges of the container.

Answer

It is a deprecated property replaced by `margin`.

Question 17

When using `flex: 1`, what exactly does the `1` represent?

Accepted Answer

Correct Answer

Answer

`flex-shrink: 1`

Answer

`flex-basis: 1px`

Answer

`flex-grow: 1`

Answer

It sets the order index to 1.

Question 18

Can a flex item also be a flex container?

Accepted Answer

Correct Answer

Answer

No, Flexbox only supports one level of depth.

Answer

Yes, setting `display: flex` on a flex item turns it into a container for its own children, allowing for complex nested layouts.

Answer

Yes, but only if you use `display: inline-flex`.

Answer

No, it creates an infinite render loop in the browser.

Question 19

What is the difference between `display: flex` and `display: inline-flex`?

Accepted Answer

Correct Answer

Answer

`inline-flex` forces all children to be inline elements.

Answer

`inline-flex` makes the container itself act like an inline-level element (like a `<span>`), sitting alongside text, while its internal children still behave like flex items.

Answer

`inline-flex` is used strictly for mobile optimization.

Answer

They are exactly the same; `flex` is just an abbreviation.

Question 20

If a flex item has `width: 200px;` and `flex-basis: 300px;`, what base size does the browser use for flex calculations?

Accepted Answer

Correct Answer

Answer

200px

Answer

250px (the average)

Answer

300px

Answer

The properties conflict and cause a layout error.

Question 21

Which property acts as a shorthand for `flex-direction` and `flex-wrap` combined?

Accepted Answer

Correct Answer

Answer

`flex-flow`

Answer

`flex-layout`

Answer

`box-orient`

Answer

`flex-combo`

Question 22

How do you force a single flex item to break onto a new line, regardless of container width?

Accepted Answer

Correct Answer

Answer

Add a `
` tag before the item.

Answer

Set `flex-wrap: force` on the container.

Answer

Give the item a `flex-basis` or `width` of `100%`.

Answer

Set `display: block` on the item.

Question 23

Why do images sometimes appear squished or distorted inside a flex container?

Accepted Answer

Correct Answer

Answer

Because flex items have `flex-shrink: 1` by default, allowing them to shrink below their aspect ratio.

Answer

Because images cannot be flex items.

Answer

Because `align-items: stretch` alters the physical image data.

Answer

Because Flexbox ignores the `src` attribute.

Question 24

What is the 'Holy Grail Layout'?

Accepted Answer

Correct Answer

Answer

A layout utilizing `!important` on every rule to ensure perfect rendering.

Answer

A classic webpage structure consisting of a header, three columns (main content flanked by two sidebars), and a sticky footer.

Answer

A layout consisting entirely of CSS Grid, with zero HTML semantic tags.

Answer

A mobile-only layout architecture.

Question 25

When is it generally better to use CSS Grid over Flexbox?

Accepted Answer

Correct Answer

Answer

When you only need to align a few icons in a navbar.

Answer

When you are defining complex, two-dimensional layouts (both rows and columns simultaneously).

Answer

When you need support in Internet Explorer 6.

Answer

Never; Flexbox completely replaces CSS Grid.

Academy

ReactJS Interview Prep - CSS Fundamentals (Part 2)