Flex Box网格容器/离子全屏查看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>

Answer 2

感谢您的回答。有了你的flex css和离子框架，我就是这样：

preview here : ionic strange behavior

非常感谢你的帮助，我很感激： - ）

.scroll {
height: 100%;
}
.page {
    height: 100%;
    width: 100%;
    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;
}

<ion-view title="Accueil" hide-nav-bar="true">
    <ion-content scroll="false" >
        <ion-content>
            <div class="page">
                <main>
                    <div class="item"></div>
                    <div class="item"></div>
                </main>
                <footer>
                    <div class="item"></div>
                    <div class="item"></div>
                </footer>
            </div>
            
        </ion-content>
    </ion-content>
</ion-view>