html - 等高 flex 行不起作用

我想在我的内容框中有两行假设这两行都应该平均分割视口(viewport)的高度(50:50)。我的要求是我希望他们拆分高度 (40:60)，但我是 flex boxes 的初学者，所以最初我尝试使用 50:50。

第一行将有一个 img 标签，它应该跨越整个宽度和高度。但是该图像也有最大宽度和高度。第二行将有 3 个列表项，左缩略图

这是代码笔:http://codepen.io/spanhawk/pen/Ggjwye

HTML代码

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Split view equally</title>

    <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
  </head>

  <body>
    <ion-nav-bar animation="nav-title-slide-ios7" 
                 type="bar-positive" 
                 back-button-type="button-icon" 
                 back-button-icon="ion-arrow-left-c"></ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">
        <ion-content scroll="false">
            <section class="home-container">
      <div class="row">
        <div class="col col-100">
             <img src="http://placehold.it/600x500">
        </div>
      </div>
      <div class="row">
        <div class="col col-100"
             <ion-list>
        <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
          <h1>Header 1</h1>
          </ion-item>
          <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
            <h1>Header 2</h1>
          </ion-item>
            <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
              <h1>Header 3</h1>
          </ion-item>
             </ion-list>
        </div>
      </div>
    </section>
        </ion-content>
      </ion-view>
    </script>
  </body>
</html>

尽管图像的高度和宽度是 600x500，但我希望它占据容器的整个宽度，高度应为 50 50，分为两行

谁能向我解释为什么它不起作用以及如何让它起作用？

我正在做教程中描述的所有事情

http://css-tricks.com/boxes-fill-height-dont-squish1

在过去的 6 个小时里，我一直在用头撞墙，试图找出它不起作用的原因。 css 和 html 的一个缺点是，没有异常、错误等。作为链接主题回复

最佳答案

给你的容器一个确定的高度

.home-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

codepen

关于html - 等高 flex 行不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27685149/

html - 等高 flex 行不起作用

上一篇：html - 如何将登录按钮定向到另一个页面？

下一篇：jquery - 鼠标滚轮水平滚动