前端开发flex属性的计算原理

美团前端开发待遇如何
如何前端开发调试
前端开发如何压缩图片

flex属性是flex-grow、flex-shrink和flex-basis的简写形式。
前面已经已经仔细分析过了flex-grow和flex-shrink,这两个flex布局中的难点。

既然flex属性,是简写,本文以一个测试案例再来简单回顾一下。
只有主轴上有剩余空间存在时,flex-grow才起作用。
类似的,只有主轴上溢出了,flex-shrink才起作用。
怎么衡量是否有剩余空间存在,还是溢出呢?
看flex-basis。

举两个例子:
假如一个容器中只有两个子元素或者项目。
项目1的flex:2 3 30%
项目2的flex:3 2 60%
首先判断谁会起作用。
30%+60%=90%,因此还有10%的存在,因此属于有剩余空间,因此flex-grow起作用。
既然不够就扩展,按权重来扩展。
那么项目1要扩展的比例是10%的2/(2+3),即4%,因此项目1变成34%。
同理,项目2要扩展的比例是10%的3/(2+3),即6%,因此项目2变成了66%。
效果请看后面的测试案例。

我们再举个空间溢出的例子。
项目1的flex:2 3 60%
项目2的flex:3 2 110%
因60%+110%=170%,溢出了70%,因此flex-shrink将会起作用,势必每个项目都要按权重减小。
项目1减少70%的多少呢?
减少了:60%3 /(60%3+110%2)=180/400=45%,
70%的45%,即31.5%。
因此项目1变成了60%-31.5%=28.5%。
同理项目2减少的比例是
70%
(110%*2/400%)=38.5%。
因此项目2变成了110%-38.5%=71.5%。

flex-grow和flex-shrink这二者前面文章做了详细说明和类比,可以看看。
测试案例如下:
html 代码

<div class=”container”>
    <p>flex = flex-grow flex-shrink flex-basis</p>
    <div>
        <span data-index=”1″>
            子元素1的flex: <input type=”number” value=”0″ min=”0″ />
            <input type=”number” value=”1″ min=”0″ />
            <input type=”number” value=”50″ min=”0″ />%
        </span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span data-index=”2″>
            子元素2的flex: <input type=”number” value=”0″ min=”0″ />
            <input type=”number” value=”1″ min=”0″ />
            <input type=”number” value=”50″ min=”0″ />%
        </span>
    </div>
    <div id=”box” class=”box”>
        <span class=”item”></span> <span class=”item”></span>
    </div>
    <div class=”canvas”>
        <canvas id=”canvas” width=”601px” height=”60px”></canvas>
    </div>
</div>
<style>
    body {
        color: #dddddd;
        background: black;
    }
    .container {
        margin: 0 auto;
        width: 600px;
        text-align: center;
    }
    .box {
        background: silver;
        display: flex;
    }
    .item {
        height: 90px;
        flex-basis: 50%;
    }
    .item:nth-child(1) {
        background: red;
    }
    .item:nth-child(2) {
        background: orange;
    }
    input {
        width: 40px;
    }
    p {
        text-align: center;
        font-size: 1.5em;
    }
</style>
<script>
    {
        ;[…document.querySelectorAll(‘input’)].forEach((input) => {
            input.onchange = () => {
                let parent = input.parentNode
                box.children[parent.dataset.index – 1].style.flex =
                    […parent.querySelectorAll(‘input’)]
                        .map((input) => input.value)
                        .reduce((a, b) => a + ‘ ‘ + b, ”) + ‘%’
            }
        })
    }
    {
        let context = canvas.getContext(‘2d’)
        context.lineWidth = 1
        context.strokeStyle = ‘#cccccc’
        context.beginPath()
        context.moveTo(0, 30.5)
        context.lineTo(canvas.width, 30.5)
        context.closePath()
        context.stroke()
        for (let i = 0; i <= 100; i++) {
            context.beginPath()
            context.moveTo(i * 6 + 0.5, 30.5)
            if (i % 10 == 0) {
                context.lineTo(i * 6 + 0.5, 10)
            } else {
                context.lineTo(i * 6 + 0.5, 20)
            }
            context.closePath()
            context.stroke()
        }
    }
</script>
前端如何开发企业秀
前端开发如何晋升
前端开发静态资源如何加版本号
» 本文来自:前端开发者 » 《前端开发flex属性的计算原理》
» 本文链接地址:https://www.rokub.com/6834.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!