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

【问题标题】：Flex row vs colum help, layout not appearing as intendedFlex 行与列帮助，布局未按预期显示
【发布时间】：2016-08-08 02:19:33
【问题描述】：

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

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

第一个 flex 父级（主）有 3 行子级（左/中/右）。子容器（中心）应包含另一个具有 3 列子项（页眉/内容/页脚）的 flex 父项（子）。当内容溢出时，页面应该向下扩展（它没有这样做），当没有内容时，页面应该填满高度和宽度（它没有这样做）。

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

Layout Image

JSFIDDLE Link

（页眉/内容/页脚）中的比率不起作用，并且 .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>

【问题讨论】：

标签： html css overflow flexbox

【解决方案1】：

如前所述，您的 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>

【讨论】：

【解决方案2】：

你有一个标记错误。

<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

【讨论】：