會以這三項為一個章節有個原因,排版乃是切版重心,不論是序列區塊,渲染樣式,為第一步驟執行
官網介紹上方都有個 Table
左邊是 Class
使用方式
右邊是 Properties
是輸出的 css
不會使用 Properties
去 w3school 學習一下使用方式
需要了解的css
- css基礎複習-切版篇 有介紹 Display / Position / Float / Flex / Grid
Layout
Container
這項工具基本上是排版一定會用上的
<div class="container mx-auto"> <!-- 內文--> </div>
Columns
這項工具和Flex Grid 排版內文很像,但差異蠻多的尤其是排列順序,用於 相片/卡片排版會有不錯的效果。
<div class="columns-3xs">
<img class="w-full" src="https://loremflickr.com/250/250?random=1">
<img class="w-full" src="https://loremflickr.com/250/250?random=2">
<img class="w-full" src="https://loremflickr.com/250/250?random=3">
<img class="w-full" src="https://loremflickr.com/250/250?random=4">
</div>
<div class="columns-3xs">
<!-- 文字也會被分割成三等份,我自己是不建議使用 column 排版有點失控 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae voluptates minima in nostrum deleniti quam modi excepturi necessitatibus, quas autem!</p>
</div>
Display
元素顯示方式
常用的 Class | Properties |
---|
block | display: block; |
inline-block | display: inline-block; |
inline | display: inline; |
flex | display: flex; |
inline-flex | display: inline-flex; |
table | display: table; |
inline-table | display: inline-table; |
grid | display: grid; |
inline-grid | display: inline-grid; |
contents | display: contents; |
list-item | display: list-item; |
hidden | display: none; |
Float
浮動: 通常和 Clear 一起搭配於兄弟層
常用的 Class | Properties |
---|
float-right | float: right; |
float-left | float: left; |
float-none | float: none; |
Clear
清除浮動: 通常和 Float 一起搭配於兄弟層
常用的 Class | Properties |
---|
clear-right | clear: right; |
clear-left | clear: left; |
clear-both | clear: both; |
clear-none | clear: none; |
Position
定位用法
常用的 Class | Properties |
---|
static | position: static; |
fixed | position: fixed; |
absolute | position: absolute; |
relative | position: relative; |
sticky | position: sticky; |
Top / Right / Bottom / Left
# 全方位 / x軸左右 / y軸上下
# 簡單說用法
inset-{ x / y }-{ num }
{ top/ right / bottom / left }-{ num }
# example:
top-2 => top: 0.5rem;
inset-1 =>
top: 0.25rem;
right: 0.25rem;
bottom: 0.25rem;
left: 0.25rem;
inset-x-1 =>
right: 0.25rem;
left: 0.25rem;
inset-y-1 =>
top: 0.25rem;
bottom: 0.25rem;
是以 rem 做計算
Flex
最常用 莫過於使用 flex-direction
、flex-wrap
flex-direction
常用的 Class | Properties |
---|
flex-row | flex-direction: row; |
flex-row-reverse | flex-direction: row-reverse; |
flex-col | flex-direction: column; |
flex-col-reverse | flex-direction: column-reverse; |
flex-wrap
常用的 Class | Properties |
---|
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
flex-nowrap | flex-wrap: nowrap; |
justify-content
常用的 Class | Properties |
---|
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-center | justify-content: center; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
justify-items
常用的 Class | Properties |
---|
justify-items-start | justify-items: start; |
justify-items-end | justify-items: end; |
justify-items-center | justify-items: center; |
justify-items-stretch | justify-items: stretch; |
Grid
minmax()
之前都沒有介紹,example: minmax(20px, auto) 意指的是最小為20px寬度,寬度auto為最大。
grid-template-columns / grid-template-rows
# 簡單說用法
grid-{ cols / rows }-{ num }
num: 1-12 / none
# example:
grid-cols-3 => grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-none => grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-3 => grid-template-columns: none;
grid-rows-none => grid-template-rows: none;
grid-column / grid-row
# 簡單說用法
{ col / row }-auto
{ col / row }-span-{ num / full }
num:
col 1-12
row 1-6
{ col / row }-{ start / end }-{ num / auto }
num:
col 1-13
row 1-7
# example:
## column
col-span-12 => grid-column: span 12 / span 12;
col-span-full => grid-column: 1 / -1;
col-start-13 => grid-column-start: 13;
col-end-13 => grid-column-end: 13;
col-start-auto => grid-column-start: auto;
col-end-auto => grid-column-end: auto;
## row
row-span-6 => grid-row: span 6 / span 6;
row-span-full => grid-row: 1 / -1;
row-start-7 => grid-row-start: 7;
row-end-7 => grid-row-end: 7;
row-start-auto => grid-row-start: auto;
row-end-auto => grid-row-end: auto;
grid-auto-flow / grid-auto-columns / grid-auto-rows
# 簡單說用法
grid-flow-{ row / col }
grid-flow-{ row / col }-dense
auto-{ rows / cols }-auto
auto-{ rows / cols }-{ min / max / fr }
## example
grid-flow-row => grid-auto-flow: row;
grid-flow-col => grid-auto-flow: column;
grid-flow-row-dense => grid-auto-flow: row dense;
grid-flow-col-dense => grid-auto-flow: column dense;
auto-rows-auto => grid-auto-rows: auto;
auto-rows-min => grid-auto-rows: min-content;
auto-rows-max => grid-auto-rows: max-content;
auto-rows-fr => grid-auto-rows: minmax(0, 1fr);
auto-cols-auto => grid-auto-columns: auto;
auto-cols-min => grid-auto-columns: min-content;
auto-cols-max => grid-auto-columns: max-content;
auto-cols-fr => grid-auto-columns: minmax(0, 1fr);
align-content
常用的 Class | Properties |
---|
content-center | align-content: center; |
content-start | align-content: flex-start; |
content-end | align-content: flex-end; |
content-between | align-content: space-between; |
content-around | align-content: space-around; |
content-evenly | align-content: space-evenly; |
align-items
常用的 Class | Properties |
---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-center | align-items: center; |
items-baseline | align-items: baseline; |
items-stretch | align-items: stretch; |
place-content
常用的 Class | Properties |
---|
place-content-center | place-content: center; |
place-content-start | place-content: start; |
place-content-end | place-content: end; |
place-content-between | place-content: space-between; |
place-content-around | place-content: space-around; |
place-content-evenly | place-content: space-evenly; |
place-content-stretch | place-content: stretch; |
place-items
常用的 Class | Properties |
---|
place-items-start | place-items: start; |
place-items-end | place-items: end; |
place-items-center | place-items: center; |
place-items-stretch | place-items: stretch; |
結語
在觀察 Tailwindcss 在設計名稱的時候,寬度上 數值會是以 rem 為主,這個在針對一些專案尤其是版面較為刁專的介面,要稍微注意使用,基本上使用過 Bootstrap 的使用者 也不難懂此框架使用的方式,可能反而會覺得有很多更自由彈性的參數可以用感到驚奇。
以排版來說,剛開始的塊狀切割反而會是最重點的,地基歪了樓就歪的道理,所以切版 layout 非常重用,可以使用色塊 backgroud color 去改變背景色去切割區塊,會比較簡單發現原來影響了哪些區域,和 outline 可以做檢驗 (outline 不會為佔寬度,屬於繪製用與 border不同)