Проблема с Flexbox и CSS: не отображается так, как я собираюсь

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находятся в разных строках, а не в одной роли.

Не знаете, в чем моя проблема? Спасибо!

Answer 1

Может быть установлено выравнивание элемента управления flex, например

• justify-content - контролирует выравнивание всех элементов на главной оси.
• align-items - контролирует выравниваниевсе элементы на поперечной оси.
• align-self - управляет выравниванием отдельного элемента flex на перекрестной оси.
• align-content - описывается в спецификации как для «упаковки гибких линий»;контролирует расстояние между линиями изгиба на поперечной оси.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

Ваше решение ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>

        #container{

            background: #555;
            display: flex;
            flex-wrap: wrap;


            /* Align Item Horizontal */
            justify-content: space-evenly;

            /* Align Item Vertical (must be 'height' property) */
            height: 600px;
            align-items: baseline;

            /* Align item vertical where extra space */
            align-content: space-between;

        }

        .item{
            background: #f4f4f4;
            border: 1px solid #ccc;
            text-align: center;
            padding: 1rem;
            margin: 0.5rem;

            /* Same thing " width = flex-basis " */
            /* width: 300px; */
            flex-basis: 300px;
        }

        .item-1{
            order: 3;
        }

        .item-2{
            /* Align single item vertical */
            align-self: center;
            order: 2;
        }

        .item-3{
            order: 1;
        }     

    </style>
    <title>Document</title>
</head>
<body>

    <div id="container">
        <div class="item item-1"><h3>Item 1</h3></div>
        <div class="item item-2"><h3>Item 2</h3></div>
        <div class="item item-3"><h3>Item 3</h3></div>

    </div>

</body>
</html>

Answer 2

вот хорошая отправная точка для вас Линейное размещение именованных линий |Сетка по Примеру

вам нужно немного изменить макет

.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>