Question

我的flex-container1和2可以按预期工作并正确布置。但是对于flex-container3，它没有按我的预期显示。

但是，如果您运行我拥有的代码，它将无法正确显示。

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

这是您的理想起点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>

Answer 2

您可能会设置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>

Flexbox和CSS问题：未按预期显示

2 个答案: