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