css两侧固定中间自适应

CSS的两侧固定中间自适应布局是一种应用广泛的页面布局方式，其核心原理是利用CSS的弹性盒子布局实现左右两侧固定，中间部分自适应的效果。

下面是一段实现CSS两侧固定中间自适应布局的代码：

.container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.left {
  flex: 0 0 200px; /* 左侧固定宽度 */
}

.right {
  flex: 0 0 200px; /* 右侧固定宽度 */
}

.middle {
  flex: 1; /* 中间部分自适应 */
}

上面的代码中，我们首先创建了一个类名为.container的容器元素，并将其设置为弹性盒子布局。接着，我们定义了三个子元素，分别为左侧固定宽度的元素、右侧固定宽度的元素和中间部分自适应的元素。通过设置子元素的flex属性，我们可以实现这三个部分的宽度分配。

CSS的两侧固定中间自适应布局不仅可以用来实现常见的页面布局，如头部、尾部和中间内容区域的布局，还可以用来实现其他类似的效果，比如导航菜单的布局等。熟练掌握这种布局方式，可以让我们更容易地实现复杂的页面布局效果。