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

我不是女神ヾ 2022-05-11 00:18 33阅读 0赞

效果图：  
![70][]  
HTML

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%;
    }

如果想改成上、下结构，如下图  
![70 1][]  
只需改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);
    }

[70]: /images/20220511/918346c2307746feb0d294ef90da6002.png
[70 1]: /images/20220511/012bbf65c1544d2fb06a8a72c937ba7b.png