切版練習日期: 2020/02/14
觀看影片 : CssCoke - "金魚都能懂的網頁切版 : 網頁頁尾版塊 NO006" && "金魚都能懂的網頁切版 : 導覽列 NO007"

border-radiom用法

設置元素的外邊框圓角

• 設定值順序(4值) : 左上/右上/右下/左下
• 設定值順序(3值) : 左上/右上左下/右下
• 設定值順序(2值) : 左上右下/右上左下
• 設定值順序(1值) : 4角(四捨五入)

HTML:

    <div class="wrap"></div>

CSS:

    .wrap{
            width: 200px;
            height: 200px;
            background-color: #faa;
            margin: 20px;
            border-radius: 20px 40px;
        }

Note :
- 如果省略了左下角則等於右上角。
- 如果省略了右下角則等於左上角。
- 如果省略了右上角則等於左上角。

Flexbox寬度

flex-basis

flex-basis 預設值爲 auto，表示其預設分配到的空間，與 width 很像，但優先程度較高。

flex-grow

flex-grow 屬性決定了父元素在空間分配方向上還有剩餘空間時，如何分配這些剩餘空間，其值為一個權重（也稱擴張因子），默認為0，剩餘空間將會按照這個權重來分配。

分配公式: 剩餘空間 * 子元素n / Sum
(Sum = 子元素1 + 子元素2 +...)

最終寬度 = 原本寬度 + 分配寬度

EX :

父元素寬度 = 1000px
三個子元素寬度都為 100px
剩餘空間 : 1000 - (100 * 3) = 700px

若將flex-grow分給三個子元素為 1 / 3 / 1
於是Sum = 1+3+1 = 5

子元素1 = 100px + (700 * 1/5) = 240px
子元素2 = 100px + (700 * 3/5) = 520px
子元素3 = 100px + (700 * 1/5) = 240px

當所有元素的flex-grow 之和小於1 的時候，剩餘空間不會全部分配給各個元素。
分配公式: (Sum / 1) * 剩餘空間

若將flex-grow分給三個子元素為 0.1 /0.3 / 0.1
於是Sum = 0.1+0.3+0.1 = 0.5

子元素1 = 100px + (700 * 0.1 / 1) =170px
子元素2 = 100px + (700 * 0.3 / 1) = 310px
子元素3 = 100px + (700 * 0.1 / 1) =170px
剩餘空間:700 - 170 - 310 - 170 = 350px

flex-shrink

flex-shrink 屬性定義空間不夠時各個元素如何收縮，其值默認為1。
flex-shrink 定義的是元素寬度變小的一個權重分量

EX :

父元素寬度 = 500px
三個子元素寬度為: 150px / 200px / 300px
超出的寬度 : 500 - 150 - 200 - 300 = -150px
而這多出來的150px就由三個元素的分別收縮一定的量來彌補

若將flex-shrink分給三個子元素為 1 / 3 / 1
權重 = 子元素寬度 * flex-shrink
總權重:150 * 1 + 200 * 3 + 300 * 1 = 1050

三個元素分別收縮：
150 * 1(flex-shrink) * 150(width) / 1050 = -21.4px
150 * 3(flex-shrink) * 200(width) / 1050 = -85.7px
150 * 1(flex-shrink) * 300(width) / 1050 = -42.85px
三個元素的最終寬度分別為：
150 - 21.4 = 128.4px
200 - 85.7 = 114.3px
300 - 42.85 = 257.15‬px

當所有元素的flex-shrink 之和小於1 時，並不會收縮所有的空間，而只會收縮flex-shrink 之和相對於1 的比例的空間。

總權重 : 150 * 0.1 + 200 * 0.3 + 300 * 0.1 = 105
三個元素收縮總和並不是150px，而是只會收縮150px的(0.1 + 0.3 + 0.1) / 1即50%的空間：75px

三個元素分別收縮：
75 * 0.1(flex-shrink) * 150(width) / 105 = -10.7px
75 * 0.3(flex-shrink) * 200(width) / 105 = -42.85px
75 * 0.1(flex-shrink) * 300(width) / 105 = -21.42px
三個元素的最終寬度分別為：
150 - 10.7 = 139.3px
200 - 42.85 = 157.15px
300 - 21.42 = 275.58‬px

FlexBox參考網站:https://github.com/xieranmaya/blog/issues/9