柔性盒格子容器/離子全屏查看Css

Question

閱讀了大量的文章，教程和許多其他的東西，我堅持讓我瘋狂的東西。

這裏就是我想用柔性容器做到：

Picture Css flexbox grid here

我想我已經錯過了與柔性格柵的東西。我不可能擁有正確的CSS來渲染這張照片。

你能幫我一個小小的事情嗎？

Answer 1

我承認我不知道離子框架，但在這裏'如何使用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>