iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
1
Modern Web

前端新手村系列 第 20

前端新手村 flex grow & shrink 演算法

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

flex grow & shrink 演算法

此演算法,是和邦友 OTree 一起研究,我只是寫 JavaScript 驗證。

新手若覺得這種學術路線不適合你,那這一篇就跳過吧!我還是想寫一下。

來說說伸縮與壓縮的尺寸計算方式
直接用例子來試算一下。[1]

<div class="outter">
  <div class="div1"></div>
  <div class="div2"></div>
</div>
.outter {
  outline : solid 1px black;
  display: flex;
 
  .div1 {
    height:100px;
    background : red;
    flex-grow:5;
    flex-shrink:5;
    flex-basis:400px;
  }

  .div2 {
    height:100px;
    background : blue;
    flex-grow:1;
    flex-shrink:1;
    flex-basis:200px; //預借空間
  }
}

渲染結果

描述問題

元素 $i$ (每個元素) 在 flex container 中,因為伸展和壓縮,需要重新計算寬度。

運算式的名詞定義

flex-grow

運算式如下

由公式可以看出(真的可以看出嗎?)

最後的寬度,是由預借空間加上「伸展量」
伸展量是該元素佔有剩餘空間的比例。
(描述這個,跟本就是數學運算式要轉成國小應用問題的能力)

flex-shrink & flex-basis

運算式如下

由公式可以看出(真的可以看出嗎?)

最後的寬度,是由預借空間加上「壓縮量」(負數)
壓縮量是該元素的預借空間佔有剩餘空間的比例。

參考資料

[1]: flex-basis excerise


上一篇
前端新手村 flex (下)
下一篇
前端新手村 Media Query
系列文
前端新手村30

尚未有邦友留言

立即登入留言