Question

我正在尝试学习如何使用flexbox制作好看的“盒子”。我已经制作了3个柱子弹性物品，但是它们没有填满窗户（即每个身体高度占33％）。我在查看指南（http://css-tricks.com/snippets/css/a-guide-to-flexbox/）之后尝试使用flex-grow，但这不起作用。有谁知道如何做到这一点？

CSS：

.flexbox {
  display: flex;
  flex-flow: column wrap;
  flex-grow: 1;

  > div {
    padding: 1rem;
    &:nth-child(1) { background: #FF0000;}
    &:nth-child(2) { background: #00FF15;}
    &:nth-child(3) { background: #0015FF;}

}
}

html, body {
  height: 100%;
  font-size: 62,5%;
}

HTML：

<body>
  <section class="flexbox">

    <div>
      <h1> This is the first box </h1> <p>It's a very cool looking box, I agree!</p>       
     </div>

    <div>
      <h2> This is the second box </h2> <p>Not nearly as cool, right?</p>  
    </div> 

    <div> 
      <h3> This is the third box </h3> <p>I'm not even going to mention this one.</p> </div>

  </section>

</body>

Answer 1

flex（flex-grow，flex-shrink，flex-basis）属性适用于柔性物品，而非柔性容器。

http://codepen.io/cimmanon/pen/mHbLi

.flexbox {
  display: flex;
  flex-flow: column wrap;
  height: 100%; /* here */

  > div {
    flex-grow: 1; /* here */
    padding: 1rem;
    &:nth-child(1) { background: #FF0000;}
    &:nth-child(2) { background: #00FF15;}
    &:nth-child(3) { background: #0015FF;}
  }
}

html, body {
  height: 100%;
  font-size: 62.5%;
}

Answer 2

您可以尝试使用PX而不是％

height: 300px

这可能会有所帮助，因为它似乎涵盖了有问题的高度： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox高度问题

2 个答案: