html 无法获取特定的flexbox子级以形成其容器

bnl4lu3b 于 2023-05-15 发布在其他

关注(0)|答案(1)|浏览(79)

我试图让我的flexbox符合它的容器，但我似乎错过了一个步骤，但不能找出什么。
附加片段。这是在媒体查询，但我添加了整个代码，以防万一它的帮助。你会注意到我的.f在右边。它应该共享.b和.c .d .e两行

body {
  background: papayawhip;
  text-align: center;
  font-size: 2em;
  margin-bottom: 25px;
}
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100vh;
  justify-content: center;
  row-gap:10px;
  column-gap: 10px;
}
.a{
  background-color: teal;
  width: 80vw;
  height: 20vh;
}
.b{
  background-color: aliceblue;
  width: 80vw;
  height: 40vh;
  margin-bottom: 10px;
}
.c{
  background-color: #264b75;
  width: 25vw;
  height: 20vh;
}
.d{
  background-color: #773535;
  width: 25vw;
  height: 20vh;
}
.e{
  background-color: #e3b036;
  width: 25vw;
  height: 20vh;
}
.f{
  background-color: #74446f;
  width: 80vw;
  height: 20vh;
}
.nonsense{
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
}
/* desktop version */
@media (min-width: 300px){
.container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.broad{
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}
.b{
  flex-direction: row;
  width: 60vw;
  align-self: flex-start;
}
.f{
  width: 20vw;
  height: 60vh;
  align-self: flex-end;
}
.nonsense{
  display: flex;
  flex-direction: row;
  width: 60vw;
  column-gap: 10px;
}
}

<body>
    <div class="container">
    <div class="a">a</div>
    <div class="broad">
        <div class="b">b</div>
      <div class="nonsense">
        <div class="c">c</div>
        <div class="d">d</div>
        <div class="e">e</div>
    </div>
    </div>
      <div class="f">f</div>
    </div>
  </body>

Html

来源：https://stackoverflow.com/questions/76212988/cant-get-a-specific-flexbox-child-to-form-to-its-container

1条答案

按热度按时间

jvidinwx1#

看起来每个元素都在vw中给定了宽度和高度值。当您为元素的容器指定一个常规值时，可以通过以百分比为单位指定宽度来调整子元素。

* {
        box-sizing: border-box;
      }
      body {
        background: papayawhip;
        text-align: center;
        font-size: 2em;
        margin-bottom: 25px;
      }
      .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 70vh;
        justify-content: center;
      }
      .a {
        background-color: teal;
        width: 100%;
        height: 20%;
      }
      .b {
        background-color: aliceblue;
        width: 80vw;
        height: 75%;
      }
      .c {
        background-color: #264b75;
        width: calc(100% / 3);
        height: 100%;
      }
      .d {
        background-color: #773535;
        width: calc(100% / 3);
        height: 100%;
      }
      .e {
        background-color: #e3b036;
        width: calc(100% / 3);
        height: 100%;
      }
      .f {
        background-color: #74446f;
        width: 100%;
        height: 100%;
      }
      .nonsense {
        display: flex;
        flex-flow: row;
        justify-content: space-evenly;
        gap: 10px;
        height: 25%;
      }
      /* desktop version */
      @media (min-width: 300px) {
        .container {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          width: 90vw;
          margin: 0 auto;
          row-gap: 10px;
        }
        .broad {
          display: grid;
          height: 80%;
          width: 100%;
          gap: 10px;
          grid-template-columns: 3fr 1fr;
        }
        .leftSide {
          flex: 0 0 70%;
          row-gap: 10px;
        }
        .rightSide {
          flex: 0 0 30%;
          height: calc(100% + 10px);
        }
        .b {
          width: 100%;
          margin-bottom: 10px;
        }
        .f {
          width: 100%;
          height: 100%;
        }
        .nonsense {
          display: flex;
          flex-direction: row;
          width: 100%;
        }
      }

<!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" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="container">
      <div class="a">a</div>
      <div class="broad">
        <div class="leftSide">
          <div class="b">b</div>
          <div class="nonsense">
            <div class="c">c</div>
            <div class="d">d</div>
            <div class="e">e</div>
          </div>
        </div>
        <div class="rightSide">
          <div class="f">f</div>
        </div>
      </div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-05-15

我来回答

html 无法获取特定的flexbox子级以形成其容器

1条答案

相关问题

热门标签

最新问答