[分享]css两端固定中间自适应

CSS中两端固定中间自适应是指将两侧元素固定，中间元素自适应宽度。这种布局常用于网页的导航栏、页眉、页脚等位置。.container { display: flex; justifycontent: ...

CSS中两端固定中间自适应是指将两侧元素固定，中间元素自适应宽度。这种布局常用于网页的导航栏、页眉、页脚等位置。

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f2f2f2;
}

.left {
  flex: 0 1 20%;
}

.right {
  flex: 0 1 30%;
}

.middle {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
    text-align: center;
  }
  .left, .right, .middle {
    flex-basis: 100%;
    margin-bottom: 10px;
  }
} 

上述代码使用了flex布局，通过设置各元素的弹性增益（flex-grow）、弹性收缩（flex-shrink）以及初始大小（flex-basis）来实现两端固定中间自适应。具体实现如下：

• 容器设置了justify-content:space-between来使得左右两侧元素靠两侧。同时，通过设置padding来控制元素离容器边缘的距离，background-color设置了背景色。
• 左侧元素使用了flex:0 1 20%来指定不放大、能收缩、初始大小为20%的宽度；右侧元素同理，初始大小为30%。
• 中间元素使用了flex:1来指定放大、收缩、初始大小都为1，即自适应宽度。注意中间元素必须放在左右元素之后，这样才能保证左右元素的宽度不受中间元素的影响。
• 使用媒体查询@media screen and (max-width: 768px)来控制视口小于768px时的响应式布局。此时容器需要自动换行，各元素需要变成100%宽度。使用text-align:center使元素居中。

通过以上CSS代码的设置，实现了两端固定中间自适应的布局。使用这种布局，可以很好地适应不同屏幕尺寸的设备，提高网页的可用性和用户体验。