Flex 行与列帮助，布局未按预期显示

Question

几天来我一直被困在这个问题上，无论我做什么我都无法让布局按预期运行。谁能帮我完成这个布局，希望我能掌握这个概念..

我认为这应该可以正常工作，但事实并非如此。

第一个 flex 父级（主）有 3 行子级（left/center/right）。子容器（中心）应该包含另一个 flex 父容器（sub），它有 3 列子容器（header/content/footer）。当内容溢出时，页面应该向下扩展（它没有这样做），当没有内容时，页面应该填充高度和宽度（它没有这样做）。

这是我在绘画中制作的可视化表示，以帮助理解我的问题。

Layout Image

JSFIDDLE Link

(header/content/footer) 中的比率不起作用，在 .sub 中设置 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 继承高度，并且仅在主容器上使用最小高度：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 行与列帮助，布局未按预期显示

Flex row vs colum help, layout not appearing as intended

html

css

overflow

flexbox