console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      width:600px;
    }

    .column {
        height:200px;
      flex: 1;
      padding: 10px;
      transition:  flex 0.5s cubic-bezier(0.5, 0, 0.5, 1), padding 0.5s cubic-bezier(0.5, 0, 0.5, 1);
      overflow: hidden;
    }
    .column:nth-of-type(1){
        max-width:100px;
        background-color: #ffcccc;
    }

    .column.hidden {
      flex: 0;
      padding:10px 0;
    }

    .button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column"  >
      <h2>第一栏</h2>
      <p>这是第一栏的内容。</p>
    </div>
    <div class="column" style="background-color: #ccffcc;">
      <h2>第二栏</h2>
      <p>这是第二栏的内容。</p>
    </div>
    <div class="column" style="background-color: #ccccff;">
      <h2>第三栏</h2>
      <p>这是第三栏的内容。</p>
    </div>
  </div>

  <button class="button" id="toggleButton">切换中间栏</button>

  <script>
    const toggleButton = document.getElementById('toggleButton');
    const middleColumn = document.getElementsByClassName('column')[1];

    toggleButton.addEventListener('click', function() {
      middleColumn.classList.toggle('hidden');
    });
  </script>
</body>
</html>