tailwindcss 教學 - Layout Flex Grid

會以這三項為一個章節有個原因，排版乃是切版重心，不論是序列區塊，渲染樣式，為第一步驟執行
官網介紹上方都有個 Table
左邊是 Class 使用方式
右邊是 Properties 是輸出的 css
不會使用 Properties 去 w3school 學習一下使用方式

需要了解的css

css基礎複習-切版篇有介紹 Display / Position / Float / Flex / Grid

Layout

Container

這項工具基本上是排版一定會用上的

如何讓圖片內部區塊於中央排列?

<div class="container mx-auto"> <!-- 內文--> </div>

Columns

這項工具和Flex Grid 排版內文很像，但差異蠻多的尤其是排列順序，用於相片/卡片排版會有不錯的效果。

MDN - 教學

<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不同)