当前位置：网站首页>对于flex：1的详细解释，flex：1

对于flex：1的详细解释，flex：1

2022-06-24 06:55:00 【imkaifan】

flex：1 是三个属性的连写：flex-grow、flex-shrink、flex-basis

flex-grow：属性定义的是项目的方法比例，默认为 0，即如果存在剩余空间，也不会去放大
如果所有的项目的flex-grow都为1，则他们将等分剩余空间。
如果一个项目的flex-grow属性为2，其他的都为1，那么前者占据的剩余空间会比其他项多一倍。

flex-shrink：属性定义了项目的缩小比例，默认为1，即：如果空间不足，就将改项目缩小。
如果所有项目的flex-shrink属性为1，当空间不足时，就都等比例缩小。
如果一个项目的flex-shrink属性为0，其他的项目都为1，当空间不足的时候，为0的不缩小。

flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间。
浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，也就是项目本来的大小
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
并且basis和width同时存在basis会把width干掉

<!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-basis: 50px;
    }
 
    .box div:nth-child(2) {
    
      flex-basis: 100px;
    }
 
    .box div:nth-child(3) {
    
      flex-basis: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

在这里插入图片描述
flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

原网站

版权声明
本文为[imkaifan]所创，转载请带上原文链接，感谢
https://imkaifan.blog.csdn.net/article/details/125429794

边栏推荐

猜你喜欢

随机推荐