Flex Box Контейнер для сетки/Ионный полноэкранный просмотр Css

Question

После прочтения многих статей, учебных пособий и многих других вещей, я застрял в чем-то, что заставляет меня сходить с ума.

Вот что я пытаюсь сделать с гибким контейнером:

Picture Css flexbox grid here

Я думаю, что я пропустил что-то с гибкой сеткой. Невозможно, чтобы у меня был правильный CSS, чтобы получить эту картину.

Можете ли вы помочь мне с чем-то только для начала?

Answer 1

Признаюсь, я не знаю Ionic framework, но вот как это можно сделать, используя 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

Спасибо за ваш ответ. С вашей гибкой 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>