CSS实现左侧固定大小，右侧自适应的布局、左右两边固定大小，中间自适应（圣杯布局，双飞翼布局）

May_Xu_

已于 2022-08-03 16:54:34 修改

阅读量749

点赞数

文章标签： css css3 前端

于 2022-01-04 18:12:42 首次发布

本文链接：https://blog.csdn.net/May_Xu_/article/details/122308702

版权

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

.container {
  display: flex;
}

.left {
  // 项目的长度 合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
  flex-basis: 300px;
  // 一个数字，规定项目将相对于其他灵活的项目进行收缩的量 (防止右侧区域过大挤压)
  flex-shrink: 0;
  background-color: aqua;
}

.right {
  // 一个数字，规定项目将相对于其他灵活的项目进行扩展的量
  flex-grow: 1;
  background-color: bisque;
}

效果图：

此处栗子为左侧300px，右侧自适应大小

同理，如果是左右两边固定大小，中间自适应：

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

.container {
  display: flex;
}

.left {
  // 项目的长度 合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
  flex-basis: 300px;
  // 一个数字，规定项目将相对于其他灵活的项目进行收缩的量 (防止右侧区域过大挤压)
  flex-shrink: 0;
  background-color: aqua;
}

.right {
  // 项目的长度 合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
  flex-basis: 300px;
  // 一个数字，规定项目将相对于其他灵活的项目进行收缩的量 (防止右侧区域过大挤压)
  flex-shrink: 0;
  background-color: bisque;
}

.main {
  // 一个数字，规定项目将相对于其他灵活的项目进行扩展的量
  flex-grow: 1;
  background-color: #55c29a;
}

效果图：