Flexbox Grid / full screen view Css flex containers

ionic-v1
1

Hi Guys,
After reading a lot of article, tutorials and so much other things, i’m stuck with something with makes me crazy.
Here is whay i’m trying to do with flex container : (sorry …)image

here is my Css :

    .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;
}

And my View

<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>

Here is the result :frowning:

image
rendu_css1.PNG640×1136 199 KB

I think i have missed something with flex grid. It’s impossible to me to have correct css to get this picture render. Can you help me with a little something just for the beginning ?

Thanks in advance.
Picasso :stuck_out_tongue_winking_eye:

2

Always the same. ! I don’t understand :frowning: I nées yout help please