html - 容器不适合屏幕和 flex-direction : row not working properly

Question

我正在开始一个 Angular 应用程序，并且真的很难获得基本的布局设置；我有 Angular 经验，但实际的 html/css 设计对我来说是全新的

我试过的任何东西似乎都不允许这个容器占据整个屏幕。我已经尝试在 html 和容器 css 类上使用多种不同的设置，但实际上没有任何东西可以使容器适合宽度的屏幕；但高度似乎总是合适。

除了这个 flex-direction: row 似乎并不总是有效。例如，我试图让标题 div 内的 div“side”和 div“main”彼此相邻。取而代之的是，那些 div 的行为就像列；尽管我已经穿上了；我也试过 display: inline-block 也没有用。我减少了 side 和 main 的宽度，希望它们可以紧挨着彼此，但这也行不通。

截图: Full View

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

.container {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.header {
  margin-top: 15px;
  border: 1px solid red;
  height: 15vh;
  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;
}

<div class="container">
  <div class="header">
    <div class="side">
      <p>HI</p>
      <div class="main">
        <p>HI2</p>
      </div>
    </div>
    <div class="body">
      <p>I am the body</p>
    </div>
  </div>
</div>

Answer 1

首先 - 您的代码中有不少拼写错误。您尚未关闭 side 类或 main 类，并且 side div 没有关闭 div。

其次 - 在我整理了您的代码后，我注意到您正在制作 .container display: flex; 而实际上您需要制作 .header display: flex ; 因为这是侧 div 和主 div 的父级。

这是一个很好的 flexbox 指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这应该适合你:

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

.container {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.header {
  margin-top: 15px;
  border: 1px solid red;
  height: 15vh;
		display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
	 justify-content: flex-start;
}

.side {
  width: 15vw;
  border: 1px solid yellow;	
}

.main {
  width: 50vw;
  border: 1px solid blue;
}

.body {
  border: 1px solid green;
  height: 80vh;
}

<div class="container">
  <div class="header">
    <div class="side">
      <p>HI</p>
			</div>
    <div class="main">
      <p>HI2</p>
    </div>
  </div>
  <div class="body">
    <p>I am the body</p>
  </div>
</div>