容器不适合屏幕和 flex-direction：行无法正常工作答案

【问题标题】：Container not fitting to screen and flex-direction: row not working properly容器不适合屏幕和 flex-direction：行无法正常工作
【发布时间】：2019-12-07 23:43:26
【问题描述】：

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

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

除了这个 flex-direction: row 似乎并不能始终如一地工作。例如，我试图让标题 div 中的 div“side”和 div“main”彼此相邻。取而代之的是，那些 div 的行为就像列；尽管我没有包裹；我也尝试过 display: inline-block ，这也不起作用。我减小了侧边和主边的宽度，希望它们能紧挨着放置，但这也不起作用。

截图： 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>

【问题讨论】：

刚开始，至少有几个错别字真的会搞砸，比如<div class="side>和<div class="main>没有右引号，<div class"body">没有=签名。
抱歉，我在工作，因为无法复制/粘贴到浏览器中，所以不得不全部输入。
容器的定位也什么都不做。如果你在html 上设置了一个高度（虽然我认为这应该在body 上），那么容器上的height:100% 就足够了。
您的权利，在将两者的高度都设置为 100% 后，它没有任何改变，但它仍然不适合屏幕宽度。你知道有什么办法可以解决这个问题吗？

标签： html css angular flexbox

【解决方案1】：

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

其次 - 在我整理了你的代码之后，我注意到你正在制作 .container display: flex; 而实际上你需要制作 .header display: flex; 因为这是侧面和主要 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>

【讨论】：

感谢您的回答，我认为 display: flex 将适用于所有儿童，而不仅仅是第一代儿童。你知道为什么容器不能完全适应屏幕吗？
没问题。当我在研究答案时，恐怕无法用容器复制问题。
谢谢，我怀疑这与我的 Angular 项目有关。

【解决方案2】：

主要是内侧。如果您希望它们彼此相邻，则需要将它们安排为 flexbox 中的兄弟姐妹。

您还忘记在标题 css 上添加 display: flex。

试试这个

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;
}

.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>
    <div class="main">
      <p>HI2</p>
    </div>
  </div>
  <div class="body">
    <p>I am the body</p>
  </div>
</div>

【讨论】：