•  11-06-2023
  •  | 
  •  

题

I'm trying to learn how to make good looking "boxes" with flexbox. I have made 3 column flex items but they don't fill the window (i.e taking up 33% each of the height of body). I tried using flex-grow after looking at a guide ( http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) but that did not work. Does anyone know how to do this?

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>
有帮助吗？

解决方案

The flex (flex-grow, flex-shrink, flex-basis) properties are for flex items, not flex containers.

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%;
}

其他提示

You can try using PX rather than % 

height: 300px

This may be helpful as it seems to cover the height in question: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top