flexbox中的rowspan或colspan？

Question

我是专业的后端程序员。但我刚开始学习flexbox，我想用flexbox打天空。

所以，我创建了一个最简单的设计，但在使用flexbox创建它时，它看起来最复杂。

这是设计：

伙计们，我无法弄明白，如何在没有行或列的情况下使用flexbox。我不知道但是在flexbox中有什么像rowspan或colspan我可以用来安排这些div，如上图所示？

这是我的代码：

HTML：

<div class="wrapper">
  <div class="div-wrapper1">
    <div class="inner-wrapper1">
      <div class="div1"></div>
      <div class="fake1"></div>
    </div>
    <div class="div2"></div>
  </div>  
  <div class="div-wrapper2">
    <div class="div3"></div>
    <div class="inner-wrapper2">
      <div class="fake2"></div>
      <div class="div4"></div>
    </div>
  </div>
  <div class="div-center"></div>
</div>

CSS：

.wrapper {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.div-wrapper1 {
  display: flex;
  flex: 1;
}

.div-wrapper2 {
  display: flex;
  flex: 1
}

.inner-wrapper1 {
  display: flex;
  flex: 3;
  flex-direction: column; 
}

.div1 {
  background-color: red;
  display: flex;
  flex: 3
}

.fake1 { 
  display: flex;
  flex: 1
}

.div2 {
  background-color: green;
  display: flex;
  flex: 2
}

.div3 {
  background-color: blue;
  display: flex;
  flex: 2
}

.inner-wrapper2 {
  display: flex;
  flex: 3;
  flex-direction: column; 
}

.div4 {
  background-color: yellow;
  display: flex;
  flex: 3
}

.fake2 { 
  display: flex;
  flex: 1
}

.div-center {
  background-color: black;
}

这是我的输出：

这是codepen

Answer 1

也许解决方案是简单地向.div-wrapper1添加负边距，您将得到确切的布局：

.wrapper {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.div-wrapper1 {
  display: flex;
  flex: 1;
}

.div-wrapper2 {
  display: flex;
  flex: 1;
  margin-top: -30px;
}

.div-wrapper3 {
  display: flex;
  flex: 1
}

.inner-wrapper1 {
  display: flex;
  flex: 3;
  flex-direction: column; 
}

.div1 {
  background-color: red;
  display: flex;
  flex: 3
}

.fake1 { 
  display: flex;
  flex: 1
}

.div2 {
  background-color: green;
  display: flex;
  flex: 2
}

.div3 {
  background-color: blue;
  display: flex;
  flex: 2
}

.inner-wrapper2 {
  display: flex;
  flex: 3;
  flex-direction: column; 
}

.div4 {
  background-color: yellow;
  display: flex;
  flex: 3
}

.fake2 { 
  display: flex;
  flex: 1
}

.div-center {
  background-color: black;
}

<div class="wrapper">
  <div class="div-wrapper1">
    <div class="inner-wrapper1">
      <div class="div1"></div>
      <div class="fake1"></div>
    </div>
    <div class="div2"></div>
  </div>  
  <div class="div-wrapper2">
    <div class="div3"></div>
    <div class="inner-wrapper2">
      <div class="fake2"></div>
      <div class="div4"></div>
    </div>
  </div>
  <div class="div-center"></div>
</div>

如果你想在这里是另一个解决方案，没有任何负值和白色部分内的内容（只需根据需要调整高度/宽度）：

.first,
.second {
  display: flex;
  height: 100px;
  width: 200px;
}

.first:before {
  content: "";
  background: red;
  flex: 3;
}

.first:after {
  content: "";
  background: green;
  flex: 2;
}

.second:before {
  content: "";
  background: blue;
  flex: 2;
}

.second:after {
  content: "";
  background: yellow;
  flex: 3;
}

.fake {
  display: flex;
  height: 20px;
  width: 200px;
}

.fake a {
  flex: 1;
  text-align: center;
}

.fake:before {
  content: "";
  background: blue;
  flex: 2;
}

.fake:after {
  content: "";
  background: green;
  flex: 2;
}

<div class="first">
</div>
<div class="fake">
  <a href="">link</a>
</div>
<div class="second">
</div>

通过简单地使用多个线性渐变，这是另一种解决方案：

.box {
  display: flex;
  height: 220px;
  width: 200px;
  justify-content: center;
  align-items: center;
  background-image:linear-gradient(to right,red 66%,green 0%),
                   linear-gradient(to right,blue 33%,white 0%,white 66%,green 66%),
                   linear-gradient(to right,blue 33%,yellow 0%);
  
  background-size:100% 100px,100% 20px,100% 100px;
  background-position:top,center,bottom;
  background-repeat:no-repeat;
}

<div class="box">
  <a href="#">link</a>
</div>