| 美团前端开发待遇如何 |
| 如何前端开发调试 |
| 前端开发如何压缩图片 |
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>
<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>
| 前端如何开发企业秀 |
| 前端开发如何晋升 |
| 前端开发静态资源如何加版本号 |
前端开发者
评论前必须登录！
注册