左侧固定宽度，右侧自适应宽度的CSS布局

这里提供一种常见的左侧固定宽度，右侧自适应宽度的CSS布局方法：使用flex布局。

1. flex布局介绍

Flex布局是一种新的布局方式，在CSS3中引入。它可以让容器中的子元素自适应空间，灵活地分配空间以实现更好的布局效果。

Flex布局采用了两种基本的概念：flex容器和flex项目。Flex容器是指将子元素放置在其中的父元素，而Flex项目则是指Flex容器中的子元素。

2. 左侧固定宽度，右侧自适应宽度的布局实现

我们可以将左侧固定宽度的区块作为flex容器中的一个flex项目，将右侧自适应宽度的区块作为另一个flex项目，然后使用flexbox的属性实现布局。

以下是HTML结构的示例代码：

<div class="container">
  <div class="left">左侧固定区块</div>
  <div class="right">右侧自适应区块</div>
</div>

对应的CSS样式代码如下：

.container {
  display: flex; /* 将容器设置为flex容器 */
}

.left {
  flex: 0 0 200px; /* 将左侧区块设置为flex项目，并固定宽度为200px */
}

.right {
  flex: 1; /* 将右侧区块设置为flex项目，并自适应宽度 */
}

上面的代码中，我们使用了flex属性来控制flex项目的宽度和自适应性。在左侧区块中，flex: 0 0 200px表示该项目的flex-grow、flex-shrink和flex-basis属性分别为0、0和200px，即在分配剩余空间时不会增加该项目的宽度，并且自身宽度为200px。而在右侧区块中，flex: 1表示该项目的flex-grow为1，即在分配剩余空间时会自适应地增加宽度，占据剩余的所有空间。

3. 示例说明

示例1：左侧为导航栏，右侧为内容

假设我们需要实现一个网页，左侧为导航栏，右侧为内容。具体的实现方法如下：

<div class="container">
  <div class="nav">导航栏</div>
  <div class="content">内容</div>
</div>

对应的样式代码如下：

.container {
  display: flex;
}

.nav {
  flex: 0 0 200px;
  background: #ccc;
}

.content {
  flex: 1;
  background: #eee;
}

在这个示例中，我们将导航栏和内容区块分别作为左侧和右侧的flex项目，并分别设置了它们的宽度和自适应性。这样，无论内容的高度如何，都可以自适应宽度，保证布局的美观性和稳定性。

示例2：左右两侧各为一块区域

假设我们需要在一个网站中实现左右两侧各为一块区域的布局，其中左侧为一个固定宽度的广告块，右侧为文章列表。具体实现方法如下：

<div class="container">
  <div class="ad">广告块</div>
  <div class="article-list">文章列表</div>
</div>