[ css 弹性盒子模型 flex-grow 属性 ] 弹性盒子模型flex布局中flex-grow属性讲解及实例演示的区别

时间：2022-05-27 05:27:49

根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

实例:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>-webkit-flex-basis_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style> .flex { display: -webkit-flex; width: 600px; margin: 0; padding: 0; list-style: none;
} .flex li:nth-child(1) { width: 200px; background: #F00;
} .flex li:nth-child(2) { flex-grow: 1; width: 50px; background: #0F0;
} .flex li:nth-child(3) { flex-grow: 3; width: 50px; background: #00F;
}
</style>
</head>
<body>
    <ul class="flex">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>
</html>

解析:

    • flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。

      本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3

      flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：

      a: 50+(300/4)=200px　　//如果没有显示定义该属性，是不会拥有分配剩余空间权利的

      b: 50+(300* 1/4 )=125px

      a: 50+(300* 3/4 )=275px

标签：

相关文章