全屏下CSS Flexbox（start/center/end）对齐：如何实现预期全屏布局？

嘿，我来帮你解决这个问题！你的布局没法撑满整页，核心原因是外层Flex容器和<body>、<html>都没设置足够的高度——默认情况下，块级元素只会根据内容自动调整高度，不会主动占满视口。下面是修复后的完整代码，我还加了点注释帮你理解：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 先让html和body撑满整个视口高度，清除默认边距和内边距 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body { 
            text-align: center; 
        }
        /* 给外层Flex容器设置100%高度，继承body的高度 */
        #outer { 
            display: flex; 
            color: white; 
            flex-direction: column;
            height: 100%;
            /* 可选：让三个盒子分别靠顶、居中、靠底排列，直观展示占满效果 */
            justify-content: space-between; 
        }
        .box { 
            background-color: lightgray; 
            width: 100px; 
            height: 80px; 
            align-self: flex-start; 
        }
        .box:nth-child(2) { 
            background-color: gray; 
            align-self: center; 
        }
        .box:last-child { 
            background-color: rgb(182, 179, 179); 
            align-self: flex-end; 
        }
    </style>
</head>
<body>
<div id="outer">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>

关键修复点拆解： #

• 给<html>和<body>设置height: 100%，同时清除默认的margin和padding——这一步是让页面的根元素先撑满浏览器视口。
• 给你的外层容器#outer设置height: 100%，这样它就能继承<body>的高度，变成一个占满整页的Flex容器。
• 我额外加了justify-content: space-between，这样三个盒子会分别分布在容器的顶部、中间和底部，你一眼就能看出容器已经占满整页了（如果不需要这个分布效果，删掉这行就行）。

为啥原来的代码没效果？ #

默认情况下，像<div>这样的块级元素，高度是由内部内容的高度决定的，不会自动扩展到父元素的高度。而<body>和<html>默认也没有设置高度，所以哪怕你给div加了display: flex，它也只会紧紧包裹住三个小盒子，没法撑满整个页面。

内容的提问来源于stack exchange，提问作者randomobject123