Angular应用布局问题：容器无法适配屏幕及flex-direction: row失效

嘿，我来帮你搞定这俩布局难题！先扒一扒你代码里的几个小坑，咱们逐个填平：

问题1：容器宽度没法铺满屏幕 #

浏览器默认会给body元素加上8px左右的margin，你只给html设了margin:0，却忘了处理body的默认样式，这就导致容器被挤得没法铺满。另外咱们得确保body也和html一样占满视口：

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

你的.container其实不用额外设top/left/bottom/right，只要它是flex容器（已经设了display:flex），在flex-direction:column下默认会占满父元素（body）的宽度，所以宽度问题就解决了。

问题2：header里的side和main没法并排 #

这有俩关键错误：

1. HTML结构错了：你把.main嵌套在.side里面了，这俩要平级放在.header里才能并排！
2. CSS漏了核心属性：.header只加了flex-direction:row，但没加display:flex！flex布局的前提是容器必须设置display:flex，不然flex相关属性根本不起作用。

另外你.body的CSS语法写错了，border; 1px solid green应该改成border: 1px solid green（把分号改成冒号）。

修正后的完整代码 #

CSS部分：

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  height: 100vh; /* 让容器占满视口高度 */
}
.header {
  margin-top: 15px;
  border: 1px solid red;
  height: 15vh;
  display: flex; /* 必须加这个！ */
  flex-direction: row;
  flex-wrap: nowrap;
}
.body {
  border: 1px solid green; /* 修正语法错误 */
  height: 80vh;
}
.side {
  width: 15vw;
  border: 1px solid yellow;
}
.main {
  width: 50vw;
  border: 1px solid blue;
}

HTML部分：

<div class="container">
  <div class="header">
    <div class="side">
      <p>HI</p>
    </div>
    <!-- 把main移出来，和side平级 -->
    <div class="main">
      <p>HI2</p>
    </div>
  </div>
  <div class="body">
    <p>I am the body</p>
  </div>
</div>

这样改完之后，容器就能铺满屏幕，header里的side和main也能并排显示啦！

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