Question

我正在尝试使用flexbox和来自codebin的教程，我希望布局是一个全屏的flexbox布局。

由于某些原因，Jfiddle无法模仿100％弹力的东西，但截图似乎使问题清晰。

但是我希望标题具有预定义的高度而不会拉伸，并且元素中有很多空的空间似乎不会将其自身包装到其内容中。

这真的适用于所有物品。我想要一个布局，我可以定义项目的高度，而不会在过程中创建非包装的空白。％似乎不起作用。

Flexbox not sizing correctly

<html>
<style>
    body {
        display:flex;
    }

    .wrapper {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;  

      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;

      font-weight: bold;
      text-align: center;
      align-items:stretch;
    }

    .wrapper > * {
      padding: 10px;
      flex: 1 100%;
      flex-basis: 1 auto;
    }

    .header {
      height:20%;
      flex-shrink:1;
      background: red;
    }

    .footer {
      background: green;
    }

    .main {
      width:80%;
      text-align: left;
      background: blue;
    }

    .aside-1 {
      width:10%;
      background: gold;
    }

    .aside-2 {
        width:10%;
      background: pink;
    }

    @media all and (min-width: 600px) {
      .aside { flex: 1 auto; }
    }

    @media all and (min-width: 800px) {
      .main    { flex: 2 0px; }
      .aside-1 { order: 1; } 
      .main    { order: 2; }
      .aside-2 { order: 3; }
      .footer  { order: 4; }
    }

</style>
<body>
    <div class="wrapper">
      <header class="header">Header</header>
        <article class="main">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
        </article>
        <aside class="aside aside-1">Aside 1</aside>
        <aside class="aside aside-2">Aside 2</aside>
        <footer class="footer">Footer</footer>
    </div>
</body>

调整各个flexbox项目的大小

0 个答案: