整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在為網頁排版抓狂？別擔心，CSS的 flex 布局來了，讓你輕松玩轉各種頁面布局，實現網頁設計自由！
Flex 布局，也稱為彈性布局，是 CSS 中的一種強大布局方式，它能夠讓你的網頁元素像彈簧一樣，靈活地適應各種屏幕尺寸和設備方向。
想象一下:
這些看似復雜的需求，使用Flex布局就能輕松解決！
.container {
display: flex; /* 將 .container 元素設置為 Flex 容器 */
}
<div class="container">
<div class="item">項目 1</div>
<div class="item">項目 2</div>
<div class="item">項目 3</div>
</div>
<div class="container">
<div class="sidebar">側邊欄</div>
<div class="content">主要內容</div>
<div class="aside">側邊欄</div>
</div>
.container {
display: flex;
}
.sidebar {
width: 200px;
}
.content {
flex: 1; /* 自動填充剩余空間 */
}
.aside {
width: 200px;
}
Flex 布局是網頁排版的神器，掌握它，你就能輕松應對各種布局需求，讓你的網頁設計更加靈活、美觀！
家好，我是Echa。
最近又有老鐵私信我，前面一段時間分享了幾十款Vue、React、微信小程序開源商城項目以及后臺管理開源項目等等，有沒有CSS相關開源框架？羊了還沒有完全康復，伴著咳嗽中上Github上搜索，功夫不負有心人，找到了一些。今天來分享 GitHub 上一些熱門的 CSS 框架！
創作不易，喜歡的老鐵們加個關注，點個贊，后面會持續更新干貨，速速收藏，謝謝！
官網地址：https://getbootstrap.com/
GitHub（131k）：https://github.com/twbs/bootstrap
Bootstrap是 Twitter 推出的基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的CSS開發框架，使得 Web 開發更加快捷。Bootstrap 提供了優雅的HTML和CSS規范，它由動態CSS語言Less寫成。Bootstrap 推出后頗受歡迎，一直是GitHub上的熱門開源項目。
Bootstrap 的優點：
Bootstrap 的缺點：
官方地址：https://get.foundation/
GitHub(29.4k)：https://github.com/foundation/foundation-sites
Foundation 是一個用于開發響應式的 HTML, CSS 和 JavaScript 框架。它是一個易用、強大而且靈活的框架，用于構建基于任何設備上的 Web 應用，是一個移動優先的流行框架。
實際上，Foundation 不僅僅是一個 CSS 框架，而是一系列前端開發工具。這些工具可以一起使用，也可以完全獨立使用。
Foundation 的優點：
Foundation 的缺點：
官方地址：https://bulma.io/
GitHub（46.5k）：https://github.com/jgthms/bulma
Bulma 是一個免費的開源CSS框架，它提供了現成的前端組件，可以輕松地組合這些組件來構建響應式 Web 界面。Bulma 框架最大的特點就是簡單好用。所有樣式都基于class，只需為 HTML 元素指定class，樣式將立刻生效。
Bulma 的優點：
Bulma 的缺點：
官方網址：https://tailwindcss.com/
GitHub（63.2k）：https://github.com/tailwindlabs/tailwindcss
Tailwind CSS 是一個功能類優先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的類，它們能直接在HTML中組合起來，構建出任何設計。
Tailwind 的優點：
Tailwind 的缺點：
官方地址：http://getuikit.com/
GitHub（17.7k）：https://github.com/uikit/uikit
UIkit 是 YOOtheme 團隊開發的一款輕量級、模塊化的前端框架，可快速構建強大的前端界面。UIKit提供了全面的HTML、CSS、JavaScript組件。它基于LESS開發，代碼結構清晰簡單，易于擴展和維護，并且具有體積小、反應靈敏的響應式組件，可以根據 UIKit 基本的風格樣式，輕松地自定義創建出自己喜歡的主題樣式。
UIkit 的優點：
UIkit 的缺點：
官網網址：https://milligram.io/
GitHub（9.9k）：https://github.com/milligram/milligram
Milligram 提供了最小的樣式設置，以快速和干凈為起點。壓縮后只有 2kb！它為更好的性能和更高的生產力而設計，需要重置的屬性更少，代碼更簡潔。
Milligram 的優點：
Milligram 的缺點：
官網地址：http://purecss.io/
GitHub(22.7k)：https://github.com/pure-css/pure
Pure.css是美國雅虎公司出品的一組輕量級、響應式純CSS模塊，適用于任何Web項目。這個框架非常小，在使用所有模塊時壓縮后只有 3.7 KB。
Pure 的優點：
Pure 的缺點：
官方網址：https://tachyons.io/
GitHub（11.3k）：https://github.com/tachyons-css/tachyons
Tachyons與其他流行的前端框架不同，Tachyons旨在將CSS規則分解為小型的、可管理的、以及可復用的部件。Tachyons可以幫助開發人員創建出具有高度可讀性、能夠快速加載和響應的網站，而且無需使用大量CSS代碼。
Tachyons 的優點：
Tachyons 的缺點：
官方地址：https://materializecss.com/
GitHub（38.7k）：https://github.com/Dogfalo/materialize
Materialize是一個使用CSS，JavaScript和HTML創建的UI組件庫。實現UI組件有助于構建有吸引力，一致和功能的網頁和網絡應用程序，同時堅持現代網絡設計原則，如瀏覽器可移植性，設備獨立性和優雅的降級。它有助于創建更快，更美觀，更靈敏的網站。它的靈感來自Google Material Design。
Materialize 的優點：
Materialize 的缺點：
這些 CSS 框架在一定程度上有助于提高工作效率。那該如何選擇這些框架呢？
最后，還是要根據實際需求來選擇最合適的CSS框架！
lex 布局是一維布局
Grid 布局是二維布局
flex 布局一次只能處理一個維度上的元素布局，一行或者一列
Grid 布局是將容器劃分成了“行”和“列”，產生了一個個的網格。
Grid基礎
display：grid 或 display：inline-grid 來創建一個網格容器
grid-template-columns 和 grid-template-rows 屬性來定義網格中的行和列
一個網格單元是在一個網格元素中最小的單位
劃分網格的線，稱為"網格線"。應該注意的是，當我們定義網格時，我們定義的是網格軌道，而不是網格線。Grid 會為我們創建編號的網格線來讓我們來定位每一個網格元素。m 列有 m + 1 垂直的網格線，n 行有 n + 1 跟水平網格線。比如上圖示例中就有 4 根垂直網格線。一般而言，是從左到右，從上到下，1，2，3 進行編號排序。當然也可以從右到左，從下到上，按照 -1，-2，-3...順序進行編號排序
grid-template-columns 屬性和 grid-template-rows 屬性
grid-template-columns 屬性設置列寬，grid-template-rows 屬性設置行高
.wrapper {
display: grid;
/* 聲明了三列，寬度分別為 200px 100px 200px */
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 聲明了兩行，行高分別為 50px 50px */
grid-template-rows: 50px 50px;
}
repeat() 函數：可以簡化重復的值。該函數接受兩個參數，第一個參數是重復的次數，第二個參數是所要重復的值。
.wrapper-1 {
display: grid;
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 2行，而且行高都為 50px */
grid-template-rows: repeat(2, 50px);
}
auto-fill 關鍵字：表示自動填充，讓一行（或者一列）中盡可能的容納更多的單元格
.wrapper-2 {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 5px;
grid-auto-rows: 50px;
}
fr 關鍵字：Grid 布局還引入了一個另外的長度單位來幫助我們創建靈活的網格軌道。fr 單位代表網格容器中可用空間的一等份。
.wrapper-3 {
display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-gap: 5px;
grid-auto-rows: 50px;
}
minmax() 函數：我們有時候想給網格元素一個最小和最大的尺寸，minmax() 函數產生一個長度范圍，表示長度就在這個范圍之中都可以應用到網格項目中。它接受兩個參數，分別為最小值和最大值。
.wrapper-4 {
display: grid;
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
grid-gap: 5px;
grid-auto-rows: 50px;
}
auto 關鍵字：由瀏覽器決定長度。通過 auto 關鍵字，我們可以輕易實現三列或者兩列布局。
.wrapper-5 {
display: grid;
grid-template-columns: 100px auto 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
}
grid-row-gap 屬性、grid-column-gap 屬性以及 grid-gap 屬性
grid-row-gap: 10px 表示行間距是 10px，grid-column-gap: 20px 表示列間距是 20px。grid-gap: 10px 20px 實現的效果是一樣的
.wrapper {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}
.wrapper-1 {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-auto-rows: 50px;
grid-row-gap: 10px;
grid-column-gap: 20px;
}
grid-template-areas 屬性
grid-template-areas 屬性用于定義區域，一個區域由一個或者多個單元格組成
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
