如何在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填充垂直空间

回答

相关问题