basti1012.bplaced.net

Ich hätte gerne das rechte Bild als Layout, und zwar 2-mal. Also man nehme das rechte Bild und legt es zweimal nebeneinander und so soll es aussehen. Ist das möglich mit Flex boxen ,wenn ja wäre mal einer so nett mir zu zeigen wie das geht? <img class="vorschau" src="/image/grid-vs-flexbox.svg">

Code

                                    
                                <style>
  #ff,#ff1{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
.funfzehn{
  height:calc(20% - 2px);
  width:calc(33.3% - 2px);
  border:1px solid black;
}


html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  
}
#wrapper{
  display:flex;
  flex-direction:column;
   height:95vh;
   width:95vw;
  margin-top:1.0vh;
  margin-left:2.5vw;

}
#oben{
  display:flex;
  flex-direction:row;
  margin-bottom:6px;
  flex:2;

}
.oeins,.odrei{
    flex:1;
    background:red;
    border:1px solid black;
}
.ozwei,.ovier{
    flex:2;
    background:red;
    border:1px solid black;
    margin-left:6px;
}
.ozwei{
    margin-right:6px;
}
.mitte{
    display:flex;
    flex-direction:row;
    flex:5;
}
.mittel{
  flex:2;
  display:flex;
  flex-direction:column;
  margin-right:6px;    
    justify-content:space-around;
}
.mittel1,.mittel2{
    display:flex;
    flex:1;
    border:1px solid black;
}
.mittel1{
    background:red;
}
.mittel2{
    margin-top:6px;
}
.unten1{
    margin-right:6px;
}
.mitter{
  flex:1;
  display:flex;
  flex-direction:column;
  background:red;
  border:1px solid black; 
}
.r2{
   margin-right:6px;
}
.unten1,.unten2{
  flex:1;
  display:flex;
  flex-direction:row;
  background:red;
  border:1px solid black;  
}

 
p:before{
  content:'Copyright ByBasti1012';
  font-size:25px;
  display:block;
  margin-left:15%;
  font-weight:900;
  color:transparent;
}



  
</style>
<div id="wrapper">
  <div id="oben">
        <div class="oeins">1</div> 
        <div class="ozwei">2</div>
        <div class="odrei">3</div>
        <div class="ovier">4</div>
  </div>
  <div class="mitte">
        <div class="mittel">
          <div class="mittel1"><p></p></div>
             <div class="mittel2"> 
                 <div class="unten1">lu 1</div> 
                 <div class="unten2">lu 2 </div>
             </div>
          </div>
        <div id="ff" class="mitter r2"></div> 
        <div class="mittel">
          <div class="mittel1"><p></p></div>
             <div class="mittel2"> 
               <div class="unten1">lu 1</div>
               <div class="unten2">lu 2 </div>
             </div>
          </div>
        <div id="ff1" class="mitter r1"></div>
  </div>
</div>
  <script>
    
    wrapper=document.getElementById('ff');
wrapper1=document.getElementById('ff1');
   for (var i = 0; i < 30; i++) {
      var line = document.createElement("div");
      line.className = "funfzehn";
      line.id='box'+i;
      line.innerHTML='box'+i;
        if(i<=14){
           wrapper.appendChild(line);
        }else{
           wrapper1.appendChild(line);
       }
  }
</script>