html - Flexbox 和 CSS 问题 : not displaying as I intend

Question

我的 flex-container1 和 2 按照我的预期工作并且布局正确......但是对于 flex-container3，它并没有按照我的意图显示。

这就是我想要的:https://imgur.com/YduJejq

但是如果你运行我的代码，它不会正确显示。

body,
html {
  display: flex;
  height: 100vh;
  min-height: 100vh;
  flex-direction: column;
  //overflow: hidden;
  margin: 0;
  padding: 0;
}

img {
  margin-right: 10px;
  margin-bottom: 5px;
}

.noDisplay {
  //display: none;
}

.flex-container1 {
  display: flex;
  min-height: 5vh;
  height: auto;
}

.flex-container2 {
  display: flex;
  height: auto;
  min-height: 70vh;
}

//container 3 info
.flex-container3 {
  display: flex;
  height: auto;
  min-height: 23vh;
}

#submitImageButton {
  align-self: center;
}

#storyTellerImageChoice {
  align-self: center;
}

#playAgainButton {
  align-self: center;
}

#displayCardsHand {
  display: flex;
  height: auto;
  flex: 5;
  justify-content: center;
  border: solid red;
}

#displayCardsEveryone {
  display: none;
  height: auto;
  flex: 5;
  border: solid blue;
}

#scoreBoard {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#scoreTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

#scores {
  flex: 6;
  border: black;
}

.borderRed {
  border-style: solid;
  border-color: red;
}

.borderOrange {
  border-style: solid;
  border-color: orange;
}

.borderBlack {
  border-style: solid;
  border-color: black;
}

#websiteTitle {
  display: flex;
  flex: 0.5;
  align-items: center;
  justify-content: center;
}

#gameTitle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

#specialGameMessages {
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: center;
}

#exitButton {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

#gameInstructionsButton {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

#videoChat {
  flex: 5;
}

#chat {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#chatWindow {
  flex: 7;
  overflow: auto;
}

#inputArea {
  display: flex;
  flex: 0.7;
}

#chatInput {
  flex: 1;
}

#chatSubmitButton {}

;

<div class="flex-container1 borderRed">
  <div id="websiteTitle">

  </div>
  <div id="gameTitle">

  </div>
  <div id="specialGameMessages">

  </div>
</div>

<div class="flex-container2 borderOrange">
  <div id="videoChat">
    <div id="remote-media"></div>
    <div id="local-media"></div>
  </div>
  <div id="chat" class="borderRed">
    <div id="chatWindow">Hello Thar!</div>
    <div id="inputArea">
      <textarea id="chatInput"></textarea>
      <button id="chatSubmitButton">Chat!</button>
    </div>
  </div>
</div>
<div class="flex-container3 borderBlack">
  <div id="displayCardsHand">
    <img id="one" class="noDisplay" src="images/img1.jpg">
    <img id="two" class="noDisplay" src="images/img2.jpg">
    <img id="three" class="noDisplay" src="images/img3.jpg">
  </div>
  <div id="displayCardsEveryone">

  </div>
  <div id="scoreBoard" class="borderOrange">
    <div id="scoreTitle">
      <div>Hi</div>
    </div>
    <div id="scores">There</div>

  </div>
</div>

首先，min-height:23vh 似乎不适用于我的 flex-container3。

此外，我的 displayCardsHand 和 scoreBoard 在不同的行上，而不是在同一 Angular 色中。

不确定我的问题是什么？谢谢!

Answer 1

这对您来说是一个很好的起点 Line-based placement named lines | Grid by Example

你会想要稍微改变一下布局

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: [col1-start] 200px  [col2-start] 100px  [col2-end];
    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
    background-color: #fff;
    color: #444;
}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;

}

.a {
    grid-column: col1-start / col2-start;
    grid-row: row1-start ;
}
.b {
    grid-column: col2-start ;
    grid-row: row1-start / row2-end;
}
.c {
    grid-column: col1-start / col2-start;
    grid-row: row2-start / row2-end ;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
</div>