返回
Featured image of post tailwindcss 教學 - Layout Flex Grid

tailwindcss 教學 - Layout Flex Grid

無需離開HTML即可賦予 CSS 的 CSS 框架

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

需要了解的css

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

元素顯示方式

常用的 ClassProperties
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
inline-tabledisplay: inline-table;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
list-itemdisplay: list-item;
hiddendisplay: none;

Float

浮動: 通常和 Clear 一起搭配於兄弟層

常用的 ClassProperties
float-rightfloat: right;
float-leftfloat: left;
float-nonefloat: none;

Clear

清除浮動: 通常和 Float 一起搭配於兄弟層

常用的 ClassProperties
clear-rightclear: right;
clear-leftclear: left;
clear-bothclear: both;
clear-noneclear: none;

Position

定位用法

常用的 ClassProperties
staticposition: static;
fixedposition: fixed;
absoluteposition: absolute;
relativeposition: relative;
stickyposition: 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-directionflex-wrap

flex-direction

常用的 ClassProperties
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;

flex-wrap

常用的 ClassProperties
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;
flex-nowrapflex-wrap: nowrap;

justify-content

常用的 ClassProperties
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-centerjustify-content: center;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
justify-evenlyjustify-content: space-evenly;

justify-items

常用的 ClassProperties
justify-items-startjustify-items: start;
justify-items-endjustify-items: end;
justify-items-centerjustify-items: center;
justify-items-stretchjustify-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

常用的 ClassProperties
content-centeralign-content: center;
content-startalign-content: flex-start;
content-endalign-content: flex-end;
content-betweenalign-content: space-between;
content-aroundalign-content: space-around;
content-evenlyalign-content: space-evenly;

align-items

常用的 ClassProperties
items-startalign-items: flex-start;
items-endalign-items: flex-end;
items-centeralign-items: center;
items-baselinealign-items: baseline;
items-stretchalign-items: stretch;

place-content

常用的 ClassProperties
place-content-centerplace-content: center;
place-content-startplace-content: start;
place-content-endplace-content: end;
place-content-betweenplace-content: space-between;
place-content-aroundplace-content: space-around;
place-content-evenlyplace-content: space-evenly;
place-content-stretchplace-content: stretch;

place-items

常用的 ClassProperties
place-items-startplace-items: start;
place-items-endplace-items: end;
place-items-centerplace-items: center;
place-items-stretchplace-items: stretch;

結語

在觀察 Tailwindcss 在設計名稱的時候,寬度上 數值會是以 rem 為主,這個在針對一些專案尤其是版面較為刁專的介面,要稍微注意使用,基本上使用過 Bootstrap 的使用者 也不難懂此框架使用的方式,可能反而會覺得有很多更自由彈性的參數可以用感到驚奇。
以排版來說,剛開始的塊狀切割反而會是最重點的,地基歪了樓就歪的道理,所以切版 layout 非常重用,可以使用色塊 backgroud color 去改變背景色去切割區塊,會比較簡單發現原來影響了哪些區域,和 outline 可以做檢驗 (outline 不會為佔寬度,屬於繪製用與 border不同)

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus