Test Flex

by benedict_chan

HTML

<div>


<div class="stack-wrapper">

  <div class="stack-item">Tesing 1</div>

  <div class="stack-item">
  
    <div class="grid-33-wrapper ">
      <div class="grid-33-col ">
              <div class="grid-33-item"></div>
      </div>
      <div class="grid-33-col">
        <div class="grid-33-item">CM</div>
      </div>
       <div class="grid-33-col">
        <div class="grid-33-item">R1</div>
        <div class="grid-33-item">R2</div>    

       </div>
    </div>
    
  </div>
  
      <div class="grid-33-wrapper stack-item">
      <div class="grid-33-col ">
              <div class="grid-33-item"></div>
      </div>
      <div class="grid-33-col">
        <div class="grid-33-item">CM</div>
      </div>
       <div class="grid-33-col">
        <div class="grid-33-item">R1</div>
        <div class="grid-33-item">R2</div>    
        <div class="grid-33-item">R3</div>

       </div> 
           </div>

    </div>
  
  <div class="stack-item">Tesing 2</div>
  <div class="stack-item">Tesing 3</div>
</div>

SCSS

/*
.stack-wrapper{
     display: flex;
     flex-direction: column;
}
.stack-item{
  flex-grow: 1;
}
.column-wrapper{
    display: flex;
    flex-direction: row;
}
.column-item{
   flex-grow: 1;
}
*/
.stack-wrapper {
  border: 1px solid #fffff0;
}

.stack-item {
  border: 1px solid #ffff00;
}
.grid-33-wrapper {
  border: 1px solid #000;
}
.grid-33-col{
    border: 1px solid #ff0000;
}
.grid-33-item{
    border: 1px solid #fff000;
}


.stack-wrapper{
     display: flex;
     flex-flow: row wrap;
         align-items: center;
    justify-content: center;    
    
}
.stack-item {
  flex: 1 100%;
}

$item-height: 5em;
.grid-33-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: $item-height*3;
}
.grid-33-col{
   flex-grow: 1;  
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
}
.grid-33-item{
    flex-grow: 1;
    height: $item-height;
    line-height: $item-height;

}