Flex实现1大n小div布局 (实用）

效果图：

HTML
 

<div id='max-box'>
  <div class="color-b b-box" onclick="clickMe(this)">a</div>
  <div class="color-y s-box" onclick="clickMe(this)">b</div>
  <div class="color-r s-box" onclick="clickMe(this)">c</div>
  <div class="color-g s-box" onclick="clickMe(this)">d</div>
</div>

JS
 

  clickMe = function(e) {
    // 找出max-box下的div
    var d = document.getElementById("max-box").getElementsByTagName("div");
    for (var i = 0; i < d.length; i++) {
      if (d[i] == e) {
        d[i].classList.remove("s-box");
        d[i].classList.add("b-box");
      } else {
        d[i].classList.remove("b-box");
        d[i].classList.add("s-box");
      }
    }
  }

css
 

.color-b {
  background-color: blue;
}

.color-y {
  background-color: yellow;
}

.color-r {
  background-color: red;
}

.color-g {
  background-color: green;
}

#max-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 300px;
  border: 1px solid blue;
}

#max-box div {
  display: block;
  box-sizing: border-box;
}

.s-box {
  flex: 0 0 33.33%;
  order: 1;
  width: 100px;
}

.b-box {
  order: 0;
  flex: 1 1 100%;
  width: calc(100% - 100px);
  height: 100%;
}

如果想改成上、下结构，如下图

只需改CSS的#max-box、.s-box和.b-box就可以 。
改后CSS
 

.color-b {
  background-color: blue;
}

.color-y {
  background-color: yellow;
}

.color-r {
  background-color: red;
}

.color-g {
  background-color: green;
}

#max-box {
  display: flex;
  /*被替换
  flex-direction: column;
  */
  flex-direction: row;     
  flex-wrap: wrap;
  width: 100%;
  height: 400px;
  border: 1px solid blue;
}

#max-box div {
  display: block;
  box-sizing: border-box;
}

.s-box {
  flex: 0 0 33.33%;
  order: 1;
  /*注释
  width: 100px;        
  */
  height: 100px;         /*加上*/
}

.b-box {  
  order: 0;
  flex: 1 1 100%;
  /*被替换
  width: calc(100% - 100px);
  height: 100%;
  */
  width: 100%;
  height: calc(100% - 100px);
}