Question

我正在尝试在页面上使用flexbox。我遇到了一个非常简单（我想）的问题。我从页眉页脚和3个部分开始。页眉和页脚的宽度必须为100％，高度取决于页眉和页脚本身中的文本。

另一方面，该部分需要为剩余的100％高度和宽度，但这不是问题。我用flex修复了这个问题：1 0px;

我将代码上传到function aliases。

 section {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    align-content: stretch;
  }

html,
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}

header {
  text-align: center;
}

footer {
  text-align: center;
}


/* MEDIA QUERYS */


/*
  ## Desktops
  ## Schermgrootte = 1281px of hoger
*/

@media (min-width: 1281px) {
  #container {
    background-color: #eee;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
  }
  #container>* {
    flex: 1 100%;
  }
  section {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    align-content: stretch;
  }
  header {
    align-self: flex-start;
    background: green;
  }
  footer {
    align-self: flex-start;
    background: gray;
  }
  #informatie {
    background-color: red;
    color: white;
    flex: 1 0px;
  }
  #omgeving {
    background-color: blue;
    color: white;
    flex: 1 0px;
  }
  #voorraden {
    background-color: yellow;
    flex: 1 0px;
  }
}


/*
  ## Laptops
  ## Schermgrootte = 961px tot 1280px
*/

@media (min-width: 961px) and (max-width: 1280px) {
  #container {
    background-color: #eee;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  #informatie {
    background-color: red;
    color: white;
  }
  #omgeving {
    background-color: blue;
    color: white;
  }
  #voorraden {
    background-color: yellow;
  }
}


/*
  ## Telefoons
  ## Schermgrootte = 320px tot 960px
*/

@media (min-width: 320px) and (max-width: 960px) {}

<!DOCTYPE html>
<html>

<head>
  <title>Samir Alieev - Challenge 1</title>
  <link rel="stylesheet" href="index.css" type="text/css" />
</head>

<body>
  <section id="container">
    <header>
      Welkom op de dashboard van de ruimteschip ITS. Hierin kunt u alle benodigde informatie vinden wat betreft de ruimteschip en het reis naar Mars. Een fijne reis toegewenst!
    </header>
    <section id="informatie">
      Voertuig informatie
    </section>
    <section id="omgeving">
      Voertuig omgeving
    </section>
    <section id="voorraden">
      Voorraden
    </section>
    <footer>
      Footer
    </footer>
  </section>
</body>

</html>

我试图将100％的高度添加到我的容器中，所有东西都获得了此属性。我从页脚和页眉中删除了此属性，但是您可以看出节与页眉之间存在巨大的差距。页脚和页面末尾之间也存在巨大差距。

我也尝试将这段代码添加到各节中，但是没有成功。我在这里想念什么？

由于其中有些人不清楚，因此以下是我要实现的Fiddle have a look

预览

Answer 1

您将需要将部分包装在另一个元素中，但是一旦完成，这很容易做到：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

main {
  flex: 1 0 auto;
  display: flex;
}

main section {
  flex: 1 0 0px;
}

/* Just colours below here */

header {
  background: green;
}

#informatie {
  background: red;
}

#omgeving {
  background: blue;
}

#voorraden {
  background: teal;
}

footer {
  background: orange;
}

<article id="container">
  <header>
    Welkom op de dashboard van de ruimteschip ITS. Hierin kunt u alle benodigde informatie vinden wat betreft de ruimteschip en het reis naar Mars. Een fijne reis toegewenst!
  </header>
  <main>
    <section id="informatie">
      Voertuig informatie
    </section>
    <section id="omgeving">
      Voertuig omgeving
    </section>
    <section id="voorraden">
      Voorraden
    </section>
  </main>
  <footer>
    Footer
  </footer>
</article>

只需将父容器设置为列格式，并使用“ main”将其灵活伸缩，然后将其中的各节设置为“ flex：1 0 0px”以使其宽度均匀

Answer 2

您需要设置占据所有页面的样式部分，还需要设置底部的样式页脚。 jsfiddle

ostream& operator<<(ostream& out, const Tree& tree) {
    return (&tree?
        out << tree.myData
            << "(" << *(tree.myLeft)  << ")"
            << "[" << *(tree.myRight) << "]":
        out);
}

Answer 3

首先，我使用flexcontainer类创建了一个div。然后我给物品弹性：1

<body>
    <header>

    </header>
    <main>
        <div class="flexcontainer">
            <div>flex item 1</div>
            <div>flex item 2</div>
            <div>flex item 3</div>
      </div>
    </main>
    <footer>Footer</footer>
</body>

body {
    margin: 0;
}

.flexcontainer{
    display: flex;
}

.flexcontainer div{
    flex: 1;
    text-align: center;
    margin: 1em;
}

孩子们不会使用flexbox拉伸身高

3 个答案: