如何在Ionic中使用Flexbox填充垂直空間

我試圖使用flexbox創建一系列縮放以適合可用屏幕空間的行。這似乎有必要在移動設備上創建一個體面的用戶界面，因爲它可以防止所有框在頂部聚集，並且均勻地分隔行。問題在於它似乎忽略了容器上的垂直填充，並且收集了頂部的元素。我的代碼如下如何在Ionic中使用Flexbox填充垂直空間

CSS：

.fill-vertical-space{ 
    display: -webkit-flex; 
    display: flex; 

    flex-direction: column; 
    background-color: green; 

    height: 100%; 
} 

.fill-vertical-space > div, .fill-vertical-space > .row{ 
    -webkit-flex: 1; 
    flex: 1; 
    background-color: blue; 
}

和HTML：

<div class="fill-vertical-space"> 
    <div class = "row"> 
     <div class="col col-100 section"> 
      ... 
     </div> 
    </div> 

    <div class = "row"> 
     <div class="col col-100 section"> 
       ... 
     </div> 
    </div> 
</div>

注：我已經離開了含量超出了行。它們通常是標題，嵌套的彈性框和下拉菜單的組合。注2：我已經看過網站上的其他答案，但它們中沒有一個與離子具體相關（可能是Ionics CSS干擾彈性盒？）。

來源

2015-09-14 adzy2k6

如果您可以使用Codepen或[ionic]（http://play.ionic.io）來創建演示，那會很好。 –

我會看看它。今天可能沒有時間，但我知道這會有所幫助。 – adzy2k6

創建一個代碼筆示例。我一直在玩這個代碼。這個相同的代碼在離子框架內似乎不起作用。 http://codepen.io/adzy2k6/pen/xwVaJe?editors=110 – adzy2k6

問題歸結爲其CSS文件中的離子類。增加：

.scroll{ 
    height: 100%; 
}

修復了這個問題。我還需要一個容納Flex模塊的外部容器，該容器的高度也設置爲100％，並聲明.fill-vertical-space類具有靜態定位。

來源

2015-09-24 09:08:22 adzy2k6

已證明。完全相同的設置完全適合我。 :) –

如何在Ionic中使用Flexbox填充垂直空間

回答

相關問題