css - Flex Box Grid 容器/Ionic 全屏 View Css

Question

在阅读了大量文章、教程和许多其他东西之后，我被一些让我发疯的事情困住了。

这是我尝试使用 flex 容器做的事情:

Picture Css flexbox grid here

我想我错过了 flex grid 的一些东西。我不可能拥有正确的 CSS 来渲染这张图片。

一开始你能帮我做点什么吗？

Answer 1

我承认我不知道 Ionic 框架，但这里是如何使用 flexbox 完成的。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.page {
  height: 100%;
  width: 80%;
  margin: auto;
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-image: url(http://lorempixel.com/output/people-q-c-1000-600-9.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
main {
  flex-basis: 80%;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  margin: 5px;
}
main .item {
  flex-grow: 1;
  border: 2px solid gold;
  margin: 5px;
}
footer {
  flex-basis: 20%;
  display: flex;
  flex-direction: row;
  border: 2px solid red;
  margin: 5px;
}
footer .item {
  flex-grow: 1;
  border: 2px solid grey;
  margin: 5px;
}

<div class="page">
  <main>
    <div class="item"></div>
    <div class="item"></div>
  </main>
  <footer>
    <div class="item"></div>
    <div class="item"></div>
  </footer>
</div>