5xRuby網頁前端設計 CSS Flex 課堂筆記 === ###### tags: `5xRuby` `css` (上課時間：20191208) ![Box Model](https://i.imgur.com/GhcXAJH.png) 盒模型 Box Model --- 盒模型(Box Model)：讓畫面的資訊限制在一個尺寸內。 - content(藍色)：顯示內容 - padding(綠色)：邊框到內容之間的距離(又稱內距、留白、墊充) - border(黃色)：邊框 - margin(橘色)：外邊界的距離(又稱外距，不計入Box的實際大小) ※ box-sizing：變更盒子的計算方式。 用來指定寬度(width)和高度(height)要作用在哪一個盒子(box)使用。 * content-box(預設值)：把寬度值設定給內容物。 * border-box：把寬度值設定給邊框到邊框之間的尺寸。 *HINT：背景色的範圍即是在邊框內(含邊框 border-box內) 1. Example (設定 box-sizing:content-box時)： ```CSS= .box { width: 300px; height: 100px; margin: 20px; padding: 20px; border: 5px solid; } * 實際寬度：350 (width + padding*2 + border*2) * 實際高度：150 (heigth + padding*2 + border*2) ``` 2. Example (設定 box-sizing:border-box時)： ```CSS= .box { width: 300px; height: 100px; margin: 20px; padding: 20px; border: 5px solid; } * 實際寬度：300 (width) * 實際高度：100 (heigth) → padding和border設定的寬度/高度會自動往內推。 ``` ※ padding屬性值寫法 (margin寫法亦同)： - 一個值：指定四個邊界 → padding: [上下左右] - 兩個值：縱向 和 橫向 → padding: [上下][左右] - 三個值：上 橫向 下 → padding: [上][右左][下] - 四個值：上右下左 順時針寫法 → padding: [上][右][下][左] ※ 設定border四邊框色順序亦為[上][右][下][左] ```CSS= border-color: green blue red yellow; border-style: solid double dotted dashed; ``` :::success :art: **rgba值設定** background-color: rgba(紅, 綠, 藍, alpha); [ rgb值：0~255 ] [ alpha值(透明度)：0~1 ( 0 = 0% 透明；1 = 100% 不透明)] ※ 背景色的範圍：border + padding + content (不包含margin) ::: 網頁兩大主角 inline v.s block --- - 行物件(inline)：會跟文字排列在同一行的物件 ※ 但inline不支援寬高物件設定 - 區塊物件(block)：不會排在同一行的物件(自己獨佔一列) | | display:inline | display:block | display:inline-block | | ------ | :------: | :------: | :------:| | width |X|O|O| | height |X|O|O| | 排列 |跟大家同一列|獨自一列|跟大家同一列| | padding 左右 |O|O|O| | padding 上下 |X|O|O| | margin 左右 |O|O|O| | margin 上下 |X|O|O| ※ 當編排版面時，使用 inline-block在`<a>`或`<li>`時，標籤之間會有空白字元(約 4~5px)。 → 清除空白字元的方法：須在父層先設定字元為0 (`font-size:0;`) Float (浮動) --- - 文繞圖：float:left / float:right - 多欄版面編排 :::success ＊HINT：**為什麼要==清除浮動==(clearfix)？** 父層未設定高度時，是無法被撐開呈一個容器，會由子層去撐開它。 但當子層使用float，會造成左鄰右舍集體大爆走，導致父層無法判斷子層而無法被撐開。這時就需要清除浮動，讓使用float的子層可以按規則在容器中移動。 ```css= .clearfix { clear: both; } ``` 資料來源：https://w3c.hexschool.com/blog/19e3259e ::: Flex (彈性盒子) --- ==父層：== * display `[display:flex]`：子層預設衡向排列(左至右) * flex-direction ：控制排列與資料的方向 `[flex-direction:row]` / `[flex-direction:row-reverse]` `[flex-direction:column]` / `[flex-direction:column-reverse]` ![flex-direction](https://i.imgur.com/ptBsuQO.png) ※ `<body dir="rtl">` (會蓋過flex-direction的設定) dir：direction 語言的流向 rtl：rigth to left 由右至左 * flex-wrap ：超過設定範圍時會折行 `[flex-wrap:wrap]`：超過父層的資料會自動折行 `[flex-wrap:wrap-reverse]`：反向折行 `[flex-wrap: nowrap]`：不折行 * flex-flow ：是 flex-direction 與 flex-wrap 的縮寫。 `[flex-flow: <flex-direction> || <flex-wrap>]` --- ![主軸 次軸](https://i.imgur.com/xVmvXnU.png) ※ 主軸(main axis)：資料的流向軸 / 次軸(cross axis)：交叉軸{由上至下 由左至右}為換行方向 * justify-content 對齊方式 (以主軸做對齊基準) `[justify-content:flex-end]` `[justify-content:flex-start]` `[justify-content:center]` ※ start和end並非固定靠左或靠右，是以flex-direction的方向決定開始及結束的方向及位置 EX：設定`flex-direction:row`時為衡項順排 1→2→3，則1為頭 3為尾，當設定`justify-content:flex-end`時，則往3的方向靠。 ![justify-content Part1](https://i.imgur.com/Ty60s0D.png) `[justify-content:space-between]` 平均分配內容元素，左右元素將會與start和end貼齊 `[justify-content:space-evenly]` 平均分配內容元素 (*此法支援度較低) `[justify-content:space-around]` 平均分配於內容元素左右兩側 ![justify-content Part2](https://i.imgur.com/rBz8005.png) * align-items：針對彈性列裡面的**物件**做對齊(以次軸做對齊基準) ─ 主要針對**單行**的物件進行處理 `[align-items:flex-start]` `[align-items:flex-end]` `[align-items:center]` `[align-items:stretch]`：自動延展(無設定高度，填滿box) `[align-items:baseline]`：以所有內容元素的基線作為對齊標準 ![align-items](https://i.imgur.com/u1vxJ7y.png) * align-content：針對彈性列做對齊 ─ 主要針對**多行**的物件進行處理 `[align-content:flex-start]` `[align-content:flex-end]` `[align-content:center]` `[align-content:space-between]` `[align-content:space-around]` `[align-content:stretch]` ![align-content](https://i.imgur.com/XKQoCAA.png) ※ 當彈性列的物件只有一列時要讓彈性列垂直置中，寫`align-content:center`時，要再加上`flex-wrap:wrap`做折行的動作，否則彈性列的高度與父層高度相同就無法垂直置中對齊。 ==子層：== * `[order]` 值預設為0，則原始碼會照原本的順序做排列。 設定-1則往start排列；1則往end排列。 * `[align-self]`設定單一元素的對齊方式。(會覆寫父層 align-items 的設定) * `[flex-grow]` 分配剩餘的空間(主軸的長度)。 * `[flex-shrink]` * `[flex-basis]` ⇢ 參考資料：https://cythilya.github.io/2017/04/06/flexbox-advance/