Question

尝试使用flex-flow: column而不是flex-flow: row，似乎在Chrome或Firefox中没有按预期工作：这些框不会垂直占据指定的百分比大小。这段代码可能有什么问题？

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

      body {
       font: 24px Helvetica;
       background: #999999;
      }

      #page {
      display: -webkit-flex;
      display:         flex;
      -webkit-flex-flow: column;
              flex-flow: column;  
      }

      #main {
       background: #993333;
       margin: 5px;
       padding: 5px;
       -webkit-flex: 1 1 80%;
               flex: 1 1 80%;
       -webkit-order: 2;
               order: 2;               
       }

      header {
       margin: 4px;
       padding: 5px;
       border: 1px solid #eebb55;
       border-radius: 7pt;
       background: #ffeebb;
       -webkit-flex: 1 1 10%;
               flex: 1 1 10%;
       -webkit-order: 1;
               order: 1;

       }

      footer {
       margin: 4px;
       padding: 5px;
       border: 1px solid #eebb55;
       border-radius: 7pt;
       background: #ffeebb;
       -webkit-flex: 1 1 10%;
               flex: 1 1 10%;
       -webkit-order: 3;
               order: 3;

       }

    </style>
  </head>

  <body>
    <div id='page'>
      <header id="header"></header> 
      <div id='main'>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        </div>
      <footer></footer>
    </div>
  </body>
</html>

更改为flex-flow: row，这一切都按预期工作 - 每列指定其指定的百分比大小。但是flex-flow: column行只占据极小的高度（内部文本只是摇晃而不管Chrome中的方框）。有什么想法吗？

使用最新的Chrome和Firefox。

Jsfiddle在http://jsfiddle.net/LEtEr/。

Answer 1

你需要拉伸你的弹性容器（以及身体）以获得100％的视口高度

DEMO：http://jsfiddle.net/A7R8A/

flex容器（具有display:flex的人）在其上下文中就像常规block元素一样，如果它放在block元素内（body元素1}}在你的情况下）...就像你对块元素一样，你需要设置一个高度：

html, body, #page
    {height:100%;......}

（每次都不需要指定order，默认情况下它只是遵循正常的元素流程）

使用flexbox调整行大小

1 个答案: