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.
All direct child elements of
<body>become flex items and can be aligned, spaced, and ordered using Flexbox properties.You can use
justify-content,align-items, andflex-directionto control the placement of all main page content.The body itself behaves like a block element by default, but flex container rules will control its children.
Height issues may arise: if you want vertical centering or full-page layouts, you may need
height: 100vhon<body>to ensure the flex container fills the viewport.
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.
Use
display: flexon<body>when you want to control overall page layout using Flexbox.Set the body height explicitly (like
100vh) to enable vertical alignment.Combine with
min-heightorflex-growon child elements for responsive full-page layouts.Be careful with global flex rules—they affect all direct children, so apply additional wrappers if needed for complex layouts.