使用flex布局实现3个div并排，两侧的div宽度固定，中间的div自适应面试官问过，当时不知道，今天工作中遇到了。

最新推荐文章于 2023-09-12 10:23:21 发布

haohao_____

最新推荐文章于 2023-09-12 10:23:21 发布

阅读量1k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/haohao_____/article/details/130366176

版权

设置一个父div，添加样式display：flex。中间div设置flex-grow：1，（等同代码中设置flex：1。flex是grow、shrink、basis的简写）但是盒模型默认紧紧挨着，可以使用margin控制外边距。middle一定在中间，否则需要order属性来调整。

通过项目属性flex-grow设置middle的放大比例，将空余的空间用middle来填充，使三个项目排满一整行；默认为0，也就是对剩余空间不做处理。通过项目属性flex-basis 设置left和right的固定宽度。

<style>
.main{
      width:100%;
      height:300px;
      display: flex;
      /* 主轴方向，起点在左端 */
      flex-direction: row;
      /* 项目在主轴的对齐方式 */
      justify-content: flex-start;
    }
    .left{
      /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，
      默认值为0 1 auto。后两个属性可选。 */
      flex:0 1 200px;
      height: 100%;
      background-color:red;
    }
    .right{
      flex:0 1 200px;
      height:100%;
      background-color:pink;
    }
    .middle{
      flex:1;
      height: 100%;
      background-color:greenyellow;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</body>

haohao_____

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用flex布局实现3个div并排，两侧的div宽度固定，中间的div自适应面试官问过，当时不知道，今天工作中遇到了。

设置一个父div，添加样式display：flex。中间div设置flex-grow：1，（等同代码中设置flex：1。flex是grow、shrink、basis的简写）但是盒模型默认紧紧挨着，可以使用margin控制外边距。middle一定在中间，否则需要order属性来调整。通过项目属性flex-grow设置middle的放大比例，将空余的空间用middle来填充，使三个项目排满一整行；默认为0，也就是对剩余空间不做处理。通过项目属性flex-basis 设置left和right的固定宽度。
复制链接

扫一扫