SOURCE

console 命令行工具 X clear

                    
>
console
<div class="g-container">
  <div class="g-middle">middle</div>
  <div class="g-left">left</div>
  <div class="g-right">right</div>
</div>
.g-container {
  position: relative;
  height: 100vh;
  min-width: 400px;
  display: flex;
  
  & > div {
    height: 100vh;
    text-align: center;
    color: #fff;
    line-height: 100vh;
  }
}

.g-middle {
  order: 2;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  background: tomato;
  
}

.g-left {
  order: 1;
  flex-basis: 200px;
  flex-grow: 0;
  flex-shrink: 0;
  background: orange;
}

.g-right {
  order: 3;
  flex-basis: 200px;
  flex-grow: 0;
  flex-shrink: 0;
  background: blueviolet;
}