排版技巧
常用排版屬性
當我們設計網頁時，CSS 排版屬性是非常重要的，它可以用來控制元素的尺寸、位置和排列方式。以下我們要帶大家看這些常見的 CSS 排版屬性和使用方法：
display
display 屬性是 CSS 排版其中一個最常用的屬性之一，這個屬性可以控制 HTML 元素在網頁上的顯示方式。每個 HTML 元素都有一個預設的 display 值，大部分元素的 display 屬性預設值為 block 或 inline 其中一個。
block 區塊元素 常見的區塊元素標籤：
<div>、<p>、<form>以及 HTML5 新出現的元素，例如：<header>、<footer>、<section>等等。區塊元素，佔據一整行。
元素寬度預設占滿父元素寬度100%。
padding、margin 的水平與垂直設定皆會影響排版。
可設定寬高。
inline 行內元素 常見的行內元素標籤：
<span>、<a>、<img>行內元素，元素寬度由它的內容決定，內容寬度=元素寬度。
元素可在同一行內呈現，圖片或文字均不換行。
只有水平方向的Padding、Margin會影響排版。
設定寬高無效。
inline-block 行內區塊
以 inline 的方式呈現，但同時擁有 block 的屬性。
可設定元素的寬高。
padding、margin 的水平與垂直設定皆會影響排版。
none 畫面上不會有元素在，不會有長度寬度，也不會佔用畫面任何空間。 另外常見的隱藏屬性 visibility: hidden; 畫面上看不到元素，但元素仍然存在，有長度寬度，會佔空間。
float
float 屬性最常見的例子就是你在報紙版面上會看到的文繞圖及圖繞文效果。
在需要清除浮動的元素上使用clear屬性，設置值為left、right、both或none。
float屬性值：left、right、none（有靠左靠右就是沒有置中）
讓區塊級元素也能乖乖進行水平排列。
當元素浮動時，可能會影響其他元素的排列和布局，可以使用清除浮動來解除這個問題。
Position
position的用途是「設定物件在定位時所要的參考對象」，position屬性值為：static、relative、absolute、fixed 或 sticky。
relative 相對位置 使用 top、right、bottom 和 left 屬性來控制元素相對於其原始位置的偏移量。
absolute 絕對位置
往父層尋找有設定 position 但非 static 的元素。
以父層為基準 top、right、left、bottom 來決定要設定在哪裡。
fixed 固定位置
參考空間為視窗的範圍。
當頁面滾動時，元素的位置不會改變。
sticky 黏性位置 在可捲動的元素裡呈現 fixed效果。
Flexbox
前面已經提到了 CSS display屬性的一些用法，而flexbox也是它的其中一員，flex可以讓我們更輕鬆地創建自適應性的布局，以及靈活的對齊方式，接下來我們透過簡易的圖解來帶大家了解各種flexbox的屬性質變化。
flexbox具有主軸起點、終點、尺寸與交錯軸起點、終點、尺寸的特性可以進行布局規畫
Flex 外容器屬性
display 您要先將外容器的 display 屬性設定為 flex 才能開始使用。 .flex-container { display: flex; }
flex-direction 決定內元件排序方向的重要屬性，指定主軸運行的方向，也就是flexbox 子元素的佈局排序方向。
.flex-container { flex-direction: row | row-reverse | column | column-reverse; }
flex-wrap 在內元素超出外容器範圍時決定是否要換行的屬性。 .flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }
justify-content 用來設定主軸對齊排序。
.flex-container { justify-content: flex-start | flex-end | center | space-between | space-around; }
align-items 相對於 justify-content，以交錯軸線來做對齊與排版。
Flex 內元件屬性
flex-grow
子元素伸展比例分配。
屬性值為數字，無單位，預設值為 1，不可為負值。
flex-shrink
子元素壓縮比例分配
屬性值為數字，無單位，預設值為 1，不可為負值。
flex-basis
子元素基本大小：預設值為 0
order
重新定義元件的排列順序，順序會依據數值的大小排列。
align-self
調整內元件交錯軸的對齊設定，可個別設定單一元件的值。
白話一點的說，當總寬度超過 flex-basis 時，我們稱為 「足夠」，就會啟動 flex-grow 的比例，例如：
同理，如果總寬度小於 flex-basis 時，稱為「不夠」，就會啟動 flex-shrink，但是數值與意義剛好是相反的，例如上圖的 red 是 1、blue 是 2，但實際上比例是 red:blue = 2:1
如果 flex-basis 的值是 0 和 auto 有什麼差別呢？
這張圖很明顯看出，當 flex-basis 的值等於 0 時，是以整個元素當成比例，如果是 auto 時，是以元素內容剩餘的空間當比例分配。
Grid
flexbox 的好姐妹。（待續）
太多了，直接看教學。
https://css-tricks.com/snippets/css/complete-guide-grid/
小結
Flex 推出至今已成為主流的 CSS 排版屬性，許多 CSS 框架也都是使用 Flex 來作排版。請大家回去多多練習，可以至下方參考資料的Flexbox playground搭配範例，動手試試看會更了解 Flex 如何使用喔！
至此，我們經過 Flex 和 Grid 的使用方式，其實也算是在掌握 RWD 的特性，畢竟就是因為有 RWD 的觀念意識出現後，才有這兩個可以用，所以，下一節我們會來談到 RWD 的特別操作。
作業
查詢Float屬性相關的清除浮動元素的方法，並試著練習。
查詢與定位相關的重要 CSS 屬性：z-index的用法，並試著練習。
玩玩看上面參考資料的 flexbox playground，並且自己試著在 codepen 上練習。
更熟悉 flex 了嗎? 來測試一下學習成果! https://hexschool.tw/flexGame。
請大家回家先預習 flex-grow、flex-shrink 和 flex-basis這三個屬性的用法。
最高挑戰！使用 float, position, flex 以及 grid，製作出一模一樣的版面。
參考來源
Last updated
Was this helpful?