flex layout

by alanbeech

HTML

<div class="layout horizontal">
  <div class="master red">
    a
  </div>
  <div class="splitter splitter-h"></div>
  <div class="detail blue">
    
    
    <div class="layout vertical">
      <div class="master green">
        a
      </div>
      <div class="splitter splitter-v"></div>
      <div class="detail yellow">
        
        
        <div class="layout horizontal">
          <div class="master purple">
            123
          </div>
          <div class="splitter splitter-h"></div>
          <div class="detail grey">
            456
          </div>
        </div>
        
        
      </div>
    </div>
    
    
  </div>
  <div class="collapsed">x</div>
</div>

SCSS

body, html {
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
}

.layout {
  flex: 1 1 auto;
  display: flex;
  

  
  .master {
    display: flex;
    flex: 1 1 auto;
  }
  
  .detail {
    display: flex;
    flex: 1 1 auto;
  }
  
  .collapsed {
    display: flex;
    background-color: #eee;
    width: 25px;
  }
  
  .splitter {
    display: flex;
    background-color: white;
  }
  
  .splitter-h {
    width: 4px;
    cursor: col-resize;
  }
  
  .splitter-v {
    height: 4px;
    cursor: row-resize;
  }  
}

  .horizontal {
    flex-direction: row;
  }

  .vertical {
    flex-direction: column;
  }

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.purple {
  background-color: purple;
}

.grey {
  background-color: gray;
}