flex深度布局-子元素的尺寸计算
2020-01-07 本文已影响0人
阿古瓜
flex的属性的值是 flex-grow, flex-shrink, flex-basis的缩写
flex的属性的值是 flex-grow flex-shrink flex-basis的缩写,
- 1.默认值是 0 1 auto;
- 2.当值为none即（0 0 auto）;
- 3.当值为auto即 （1 1 auto）;
- 4.当flex取值为一个非负数字，则该数字为flex-grow的值, flex-shrink取1， flex-basis取0%；
- 5.当flex取值为一个长度或百分比，则视为flex-basis的值， flex-grow取1， flex-shrink取1；
- 6.当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%;
- 7.当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex的深度尝试</title>
</head>
<body>
<article class="f1">
<style type="text/css">
.box { display: flex; width: 800px;}
.box>div {height: 100px;}
.box>div:nth-of-type(1) {background-color: blueviolet; flex: 2 1 0%; width: 140px;}
.box>div:nth-of-type(2) {background-color: wheat; flex: 2 1 auto; width: 100px;}
.box>div:nth-of-type(3) {background-color: cadetblue; flex: 1 1 200px;}
</style>
<h2>flex-basis是如何影响计算</h2>
<section class="box">
<div>开始块</div>
<div>中间块</div>
<div>尾部块</div>
</section>
<!--
主轴上父容器尺寸为800px大小;
子元素的总基准值是：0% + auto + 200px = 300px;(auto 对应取主尺寸即 100px)
故剩余空间为 800px - 300px = 500px；
子元素放大系数之和为：2 + 2 + 1 = 5；(每份得500/5 = 100px;)
项目最终宽度如下：
1.第一个元素为 0% + 100px * 2 = 200px;
2.第二个元素为 auto + 100px * 2 = 100px + 200px = 300px;
3.第三个元素为 200px + 100px = 300px;
-->
</article>
</body>
</html>
flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。
flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况：
- auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。
- content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
- 百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。
