css 左边固定宽度右边自适应

当我们需要在网页中制作一个左边固定宽度，右边自适应的布局时，CSS就可以为我们提供帮助了。这种布局方式可以让我们更好地利用页面空间，能够完美地适应各种屏幕大小，提升用户体验。

.container {
  display: flex;
}
.left {
  width: 200px;
  background-color: #ccc;
}
.right {
  flex: 1;
  background-color: #eee;
}

首先，我们需要在HTML中创建一个容器元素，用于承载左右两个部分。在CSS中，我们可以使用display属性设置为flex来指定容器元素的布局方式。这样，它就可以同时控制左右两个部分的显示和布局了。

在左边元素中，我们需要设置一个固定的宽度，使其不论在何种屏幕尺寸下，都保持统一的宽度。这样，就可以为左边部分提供一个独立的空间。而右边元素则需要设置为自适应宽度，以便根据实际屏幕大小来调整显示效果。

当我们将以上代码应用到网页中时，整个布局就可以按照我们所期望的样式进行展示了。左边部分的宽度固定，右边部分则会自适应调整，让整个布局更加灵活、美观、舒适。