26 / 49

What happens if you set display: flex on the <body> tag?

Using display: flex on the <body> Tag in CSS

Setting display: flex on the <body> tag turns the entire body into a flex container, allowing its immediate children to be laid out according to Flexbox rules.

Effects on Layout

1
All direct child elements of <body> become flex items and can be aligned, spaced, and ordered using Flexbox properties.
2
You can use justify-content, align-items, and flex-direction to control the placement of all main page content.
3
The body itself behaves like a block element by default, but flex container rules will control its children.
4
Height issues may arise: if you want vertical centering or full-page layouts, you may need height: 100vh on <body> to ensure the flex container fills the viewport.

Example: Flex on Body

In this example, the <header>, <main>, and <footer> elements become flex items. They are vertically centered in the viewport because the body uses justify-content: center and align-items: center.

Best Practices

1
Use display: flex on <body> when you want to control overall page layout using Flexbox.
2
Set the body height explicitly (like 100vh) to enable vertical alignment.
3
Combine with min-height or flex-grow on child elements for responsive full-page layouts.
4
Be careful with global flex rules—they affect all direct children, so apply additional wrappers if needed for complex layouts.

Difficulty: 3/10

Topics: Flexbox layout, global page styling, layout side‑effects

Scenario Questions

0-2 years experience

1
If you add display:flex to the <body> of a page that has a header, main, and footer, what will happen to their layout?
2
How would you keep the footer at the bottom of the viewport after setting the body to flex?
3
What default flex values affect the children of the body and how would you change them?

2-5 years experience

1
We added display:flex to <body> and the page stopped scrolling. Walk me through how you'd diagnose and fix the issue.
2
A modal that used absolute positioning is now misaligned after the body became a flex container. What steps would you take to debug it?
3
Explain the trade‑offs of applying flex to <body> versus wrapping the page content in a dedicated flex container.

5-8 years experience

1
In a large SPA you need a sticky header, a scrollable main area, and a footer. How would you structure CSS on <html> and <body> when the body is a flex column to avoid layout glitches on different browsers?
2
Discuss any performance or rendering concerns that arise when the body is a flex container across many nested components.
3
How would you design a theming system that can toggle the body between flex and block layouts without breaking existing components?

8+ years experience

1
Your organization wants to standardize on display:flex on <body> for all new pages. What architectural risks do you see with legacy CSS, third‑party widgets, and accessibility, and how would you mitigate them?
2
Describe a phased rollout plan for a global flex layout on <body> across multiple product teams while preserving backward compatibility.
3
What long‑term maintenance strategies would you put in place to prevent layout regressions when the body is a flex container?

Follow-up Questions

❓What default flex properties would you need to override for a typical header‑main‑footer layout?
❓How does making the body a flex container impact scrolling on mobile browsers?
❓If a third‑party widget stops working after you set body to flex, what would you check first?