[分享]css两边固定中间可伸缩

在网页设计中，随着移动设备的普及，满足不同分辨率的屏幕显示需求，成为了设计师们需要考虑的重要问题之一。而在这个背景下，采用CSS两边固定中间可伸缩的设置，成为一种常见的解决方案。如果我们想要在Web网...

在网页设计中，随着移动设备的普及，满足不同分辨率的屏幕显示需求，成为了设计师们需要考虑的重要问题之一。而在这个背景下，采用CSS两边固定中间可伸缩的设置，成为一种常见的解决方案。

如果我们想要在Web网页中实现左右两边的固定，并让中间内容区域随着屏幕大小的变化而自适应拉伸，CSS提供了一种简洁而且易于实现的方式：

.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
}
.content {
    flex-grow: 1;
}
.right {
    width: 200px;
} 

首先，我们给容器（container）设置了宽度为100%，它的最大宽度设置为1000px，使用margin:auto可以让它水平居中。最关键的是，我们给容器使用了flexbox布局，方向为水平排列（flex-direction:row）。

接下来，我们给左边（.left）和右边（.right）分别设置了一个宽度（200px），这部分的宽度是固定的，中间的内容区域则使用flex-grow属性设置了一个值为1，表示它可以随着空余空间的变化而自动拉伸，并占据剩余的宽度。

这样，我们就完成了CSS两边固定中间可伸缩的设置，无论是在PC端还是移动端，网页都可以根据屏幕大小进行自适应的布局，而我们也不需要写大量的JavaScript代码来实现这种效果。