Question

我已经坚持了几天，无论我做什么，我都无法让布局按照预期运行。任何人都可以帮我完成这个布局，所以我希望能够掌握这个概念..

我认为这应该可以按预期工作，但事实并非如此。

第一个flex父（main）有3个子行（左/中/右）。子容器（中心）应包含另一个flex父（子），它有3个列子（header / content / footer）。当内容溢出时，页面应该向下扩展（它没有做到），当没有内容时，页面应该填满高度和宽度（它没有做到）。

这是我在绘画中用来帮助理解我的问题的视觉表现。

Layout Image

JSFIDDLE Link

（header / content / footer）中的比率不起作用，并且在.sub .content中执行100％高度会以错误的方式溢出页面。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        * {
            margin:0px;
            border:0px;
        }
        .main{
          margin-top:-20px;

          height:100%;
          display:flex;
          flex-direction:row;
        }

        .main .left{ 
           background:#009246; 
           flex: 1;
        }
        .main .center{ 
            background:#F1F2F1;
            flex: 3;
        }
        .main .right{ 
           background:#CE2B37;
           flex: 1;
        }
         .sub{
          width:100%; 
          flex-direction:culumn; 
        }
        .sub .header{
            background:blue;
            flex: 1;
        }
        .sub .content{
            background:orange;
            flex: 5;
        }
        .sub .footer{
            background:blue;
            flex: 1;
        }
   </style>

 </head>
 <body>
  <div class="main">
    <div class="left">left</div>
    <div class="center">center</div>
        <div class="sub">
            <div class="header">header</div>
            <div class="content">content</div>
            <div class="footer">footer</div>
        </div>
    <div class="right">right</div>
  </div>
 </body>
</html>

Answer 1

你有一个标记错误。

<div class="center">center<!--/div not here-->
    <div class="sub">
        <div class="header">header</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
</div><!-- finish here instead -->

在CSS中，您需要将align-items:stretch;添加到.main

.main{
      height:100%;
      display:flex;
      flex-direction:row;
      align-items:stretch; //add this...
}

还要为.center

添加一些填充

.main .center{ 
    background:#F1F2F1;
    flex: 3;
    padding:20px; /* add this */
}

更新了 Fiddle

Answer 2

如上所述，你在html结构中有一个错误。

对于css部分，你可以叠加flex容器，并从html继承高度，只在主容器上使用min-height：https://jsfiddle.net/qmwymy26/4/

        * {
          margin: 0px;
          border: 0px;
        }
        .main {
          min-height: 100%;
          display: flex;
          flex-direction: row;
        }
        .main .left {
          background: #009246;
          flex: 1;
        }
        .main .center {
          background: #F1F2F1;
          flex: 3;
          display: flex;
          flex-direction: column;
        }
        .main .right {
          background: #CE2B37;
          flex: 1;
        }
        .sub {
          display: flex;
          width: 100%;
          flex-direction: column;
          flex: 1;
        }
        .sub .header {
          background: blue;
          flex: 1;
        }
        .sub .content {
          background: orange;
          flex: 5;
        }
        .sub .footer {
          background: blue;
          flex: 1;
        }
        html,
        body {
          height: 100%
        }
:checked ~ br {display:none;}
label {font-size:2em;}

<div class="main">
  <div class="left">left</div>
  <div class="center">center
    <div class="sub">
      <div class="header">header</div>
      <div class="content">
        <label for="hd">click me to hide br tags </label><input type="checkbox" id="hd" />
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>
      </div>
      <div class="footer">footer</div>
    </div>
  </div>
  <div class="right">right</div>
</div>

Flex row vs colum帮助，布局不按预期显示

2 个答案: