Tailwind CSS 是一個功能類優先的 CSS 框架，它供給了一系列實用東西類，使得開辟者可能疾速構建呼應式、美不雅的網頁界面。Flexbox 跟 Grid 是 CSS 中兩種富強的規劃技巧，而 Tailwind CSS 則經由過程其東西類讓這兩種規劃的利用愈加輕便。以下將具體介紹怎樣利用 Tailwind CSS 來輕鬆控制 Flexbox 與 Grid 規劃。
Flexbox 規劃
Flexbox 是一種一維規劃模型，重要用於在容器外部沿著一個軸線（平日是程度或垂直偏向）陳列子元素。Tailwind CSS 供給了豐富的東西類來幫助 Flexbox 的利用。
1. 啟用 Flexbox
要啟用 Flexbox，只有在父容器上增加 flex 類即可：
<div class="flex">
<!-- 子元素 -->
</div>
2. 主軸偏向
Tailwind CSS 供給了以下類來定義主軸偏向：
flex-row：程度陳列（默許）flex-row-reverse：反向程度陳列flex-col：垂直陳列flex-col-reverse：反向垂直陳列
3. 穿插軸對齊方法
以下類用於定義穿插軸（垂直偏向）上的對齊方法：
items-start：在穿插軸肇端地位對齊items-center：在穿插軸旁邊對齊items-end：在穿插軸末端對齊items-baseline：在基線對齊items-stretch：默許值，子元素拉伸以填滿容器
4. 主軸對齊方法
以下類用於定義主軸（程度偏向）上的對齊方法：
justify-start：在主軸肇端地位對齊justify-center：在主軸旁邊對齊justify-end：在主軸末端對齊justify-between：子元素均勻分布，首尾對齊justify-around：子元素均勻分布，兩邊留有空間justify-evenly：子元素均勻分布，間隔雷同
5. 包裹子元素的方法
以下類用於把持子元素的包裹方法：
flex-grow：容許子元素擴大年夜以填滿可用空間flex-shrink：容許子元素縮小以順應空間flex-basis：定義子元素的初始大小
Grid 規劃
Grid 規劃是一種二維規劃模型，可能同時定義行跟列，用於創建複雜的二維構造。
1. 啟用 Grid
要啟用 Grid，只有在父容器上增加 grid 類：
<div class="grid">
<!-- 子元素 -->
</div>
2. 定義列數
利用 grid-cols-x 類來定義列數，其中 x 是列數：
<div class="grid grid-cols-1">...</div>
<div class="grid grid-cols-2">...</div>
<div class="grid grid-cols-3">...</div>
3. 列跟行的定義
利用 grid-template-columns 跟 grid-template-rows 屬性來定義列跟行的大小：
<div class="grid grid-template-columns: 1fr 2fr">...</div>
<div class="grid grid-template-rows: auto 1fr">...</div>
4. 列跟行的間隔
利用 gap- 類來設置列跟行的間隔：
<div class="grid gap-4">...</div>
5. 行跟列的大小
利用 grid-auto-columns 跟 grid-auto-rows 屬性來設置主動生成的行跟列的大小：
<div class="grid grid-auto-columns: minmax(100px, 1fr)">...</div>
<div class="grid grid-auto-rows: minmax(50px, auto)">...</div>
6. 地位跟對齊
利用 grid-template-areas 屬性來定義元素的地位跟對齊方法：
<div class="grid grid-template-areas: 'header header header' 'sidebar content content' 'footer footer footer'">...</div>
總結
經由過程以上介紹，可能看出 Tailwind CSS 怎樣簡化 Flexbox 跟 Grid 規劃的利用。利用 Tailwind CSS 的東西類，開辟者可能疾速構建複雜的規劃，而不必手動編寫複雜的 CSS 代碼。