css左侧拉伸右侧自适应

CSS的布局是我们前端开发中必须要掌握的技能。其中，左侧拉伸右侧自适应的布局在实际项目中十分常见。

下面我们来看一下如何实现这种布局。

  <style>
    .container {
      display: flex; /* 设置弹性布局 */
      height: 100%; /* 设置高度为100%，便于内容区域自适应 */
    }
    .left {
      flex-shrink: 0; /* 设置该元素不可拉伸 */
      width: 200px; /* 设置宽度为200px */
      background-color: #ccc;
    }
    .right {
      flex-grow: 1; /* 设置该元素自适应宽度 */
      background-color: #ddd;
    }
  </style>

  <div class="container">
    <div class="left">
      左侧内容
    </div>
    <div class="right">
      右侧内容
    </div>
  </div>

该代码使用了CSS的弹性布局，通过设置左侧元素的宽度为固定值，并且设置不能拉伸，从而实现了左侧固定宽度的效果。右侧元素则通过设置可以自适应宽度，从而实现了右侧内容自适应的效果。

总结一下，CSS中的弹性布局是实现左侧拉伸右侧自适应的重要技术，对于前端开发来说，它是必须掌握的技能。