flex:1是干嘛的

最新推荐文章于 2025-07-19 10:26:33 发布

_处女座程序员的日常

最新推荐文章于 2025-07-19 10:26:33 发布

阅读量518

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端 js css 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_42931285/article/details/137371332

本文详细解释了CSSFlexbox中flex-grow用于扩大子元素占据空间的比例，flex-shrink决定超出部分的缩小比例，而flex-basis则设置初始基线宽度。通过实例演示了如何在父元素宽度受限时调整子元素的大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上图：

在这里插入图片描述
flex:1实际代表的是三个属性的简写，如上图所示。

其中flex-grow是用来增大盒子的，比如，当子盒子的宽度小于父盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比；
flex-shrink用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例
flex-basis是用来设置盒子的基准宽度，并且basis和width同时存在basis会把width干掉，所以flex：1；的逻辑就是用flex-basis把width干掉，然后再用flex-grow和flex-shrink增大的增大缩小的缩小，达成最终的效果。

flex-grow:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
   
   
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
   
   
      width: 100px;
    }
 
    .box div:nth-child(1) {
   
   
      flex-grow: 1;
    }
 
    .box div:nth-child