css - 如何使用嵌套的flexbox制作网格

Question

首先我使用 flexbox 将左/右 50 除以 50。然后我想使用相同的方法将右侧 50% 在顶部，50% 在底部。但是，它不像红色边框所示那样工作。

我想使用嵌套的 flexbox 使右侧均匀分开(红色)。但是，它不起作用

怎么了？

https://jsfiddle.net/1zrxohj8/1/

HTML:

<div id="container">


<div class="split-h">
  <div class="debug flex-col left">

  </div>
  <div class="debug flex-col right">


        <div class="split-v">
          <div class="debug flex-row top">

          </div>
          <div class="debug flex-row bottom">

          </div>
        </div>

  </div>
</div>


</div>

CSS:

#container {
  height: 300px;
  width: 300px;
}
.split-h {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.split-h > .debug {
  border: 1px dotted grey;
}

.split-h > .flex-col {
  flex: 1;
  overflow: auto;
  height: 100%
}



.split-v {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}

.split-v > .debug {
  border: 1px dotted red;
}

.split-v > .flex-row {
  overflow: auto;
  width: 100%
}

.split-v > .top {

}

Answer 1

您缺少的是 .split-v > .flex-row 中的 flex: 1 或 flex-grow: 1 这将在其内容中适合 div。

#container {
  height: 300px;
  width: 300px;
}
.split-h {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.split-h > .debug {
  border: 1px dotted grey;
}

.split-h > .flex-col {
  flex: 1;
  height: 100%
}

.split-v {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}

.split-v > .debug {
  border: 1px dotted red;
}

.split-v > .flex-row {
  overflow: auto;
  width: 100%;
  flex: 1;
}

<div id="container">
  <div class="split-h">
    <div class="debug flex-col left">
    </div>
    <div class="debug flex-col right split-v">
      <div class="split-v">
        <div class="debug flex-row top">
        </div>
        <div class="debug flex-row bottom">
        </div>
      </div>
    </div>
  </div>
</div>

编辑:一些 CSS 属性在实现中不是必需的。已将它们注释掉并添加了原因。

#container {
  height: 300px;
  width: 300px;
}
.split-h {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.split-h > .debug {
  border: 1px dotted grey;
}

.split-h > .flex-col {
  flex: 1;
  /* height: 100% Reason:- No need since the parent class has flex-direction as row and a height value, the content will be fit in height on providing flex: 1*/ 
}

.split-v {
  display: flex;
  flex-direction: column;
  /* width: 100%; Reason:- Since the parent class split-h has flex display and flex-direction row, contents will be split equally*/
  flex: 1;
}

.split-v > .debug {
  border: 1px dotted red;
}

.split-v > .flex-row {
  overflow: auto;
  /* width: 100%; Reason:- Flex wiill handle this automatically.*/
  flex: 1;
}

<div id="container">
  <div class="split-h">
    <div class="debug flex-col left">
    </div>
    <div class="debug flex-col right split-v">
      <!-- <div class="split-v">  This is not required since the flex direction is handled in the parent layer -->
        <div class="debug flex-row top">
        </div>
        <div class="debug flex-row bottom">
        </div>
      <!-- </div> -->
    </div>
  </div>
</div>