起因：
從2018年6月一直到我重新提筆，6年時間。這六年時間，我見證了IT的興衰，見證了小眾框架LayUI框架的重新更新，見證了vue、angular、react等框架的主流。----部落格園老牛大講堂
初衷：
今年我突發靈感，想要設計一個網站，作為程式設計師卻"提筆忘字"，就連最基本的css也變得陌生，我網上翻找大量的網站，想要找到一款，像我這種半吊子也能用的網站（即懂一些程式碼原理，卻早已經忘了底層程式碼怎麼寫），事實卻讓我失望，沒有一款適合我。layui框架符合拿來即用，可有些元件根本就沒有。請原諒我，學習vue等框架對我來說太難了，我就想要一個好看的頁面，便攜通用的元件。我求索無果，所以在想，為什麼不自己開發一個開源的網站，讓大眾成為貢獻者，一起參與到開發中來。
Niu框架由然而生：----部落格園老牛大講堂
從頭編寫一個框架，說真的特別難，萬里長征，光是選擇哪一種佈局模式，讓我研究了一個星期，特別是對於我這樣一個不碰程式碼六年的小白。最終讓我決定用flex佈局，去開發一個框架。隨後我將不斷完善框架，最終形成一個小眾的開源框架。
廢話不多說，上程式碼：----部落格園老牛大講堂
開發一個框架，第一步，一定要初始化瀏覽器的各種預設引數，別問我一個小白怎麼知道的，當後期開發發現總是柵格對不齊的時候，一點點摳出來的。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 可以新增這個屬性以確保盒模型包含border和padding */
}
第二步：定義公共屬性，例如柵格水槽、圓角引數、niu-container，開始確定flex佈局+百分比的方式，開始開發。----部落格園老牛大講堂
/*第二部分： 定義flex */
/* 公共元素 */
:root {
--gap: 8px;/* 設定柵格槽之間間距 */
--border-radius: 5px;/* 設定柵格圓角數值 */
}
.niu-container {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
flex-flow: row wrap;
padding-left: calc(var(--gap));/* 設定左邊有一個邊距 這裡，下面一張圖會解釋為什麼要設定一個左邊距 */
}
注意如果沒有左邊距，瀏覽器自帶的樣式，會直接覆蓋掉。右側暫時還沒發現這個問題（歡迎大家留言，告訴我右邊需要留邊距嗎？）
第三步：設定百分比。請注意：這裡我讓每一個元素都減少了一個水槽的寬度（水槽就是兩個元素之間的距離），這個是我開發框架的亮點，有興趣的研究一下原理，歡迎提出改機意見，前提得簡單點，複雜我看不懂。----部落格園老牛大講堂
niu-col-1 {
width: calc((100% / 24) * 1 - var(--gap));
}
.niu-col-2 {
width: calc((100% / 24) * 2 - var(--gap));
}
.niu-col-3 {
width: calc((100% / 24) * 3 - var(--gap));
}
.niu-col-4 {
width: calc((100% / 24) * 4 - var(--gap));
}
.niu-col-5 {
width: calc((100% / 24) * 5 - var(--gap));
}
.niu-col-6 {
width: calc((100% / 24) * 6 - var(--gap));
}
.niu-col-7 {
width: calc((100% / 24) * 7 - var(--gap));
}
.niu-col-8 {
width: calc((100% / 24) * 8 - var(--gap));
}
.niu-col-9 {
width: calc((100% / 24) * 9 - var(--gap));
}
.niu-col-10 {
width: calc((100% / 24) * 10 - var(--gap));
}
.niu-col-11 {
width: calc((100% / 24) * 11 - var(--gap));
}
.niu-col-12 {
width: calc((100% / 24) * 12 - var(--gap));
}
.niu-col-13 {
width: calc((100% / 24) * 13 - var(--gap));
}
.niu-col-14 {
width: calc((100% / 24) * 14 - var(--gap));
}
.niu-col-15 {
width: calc((100% / 24) * 15 - var(--gap));
}
.niu-col-16 {
width: calc((100% / 24) * 16 - var(--gap));
}
.niu-col-17 {
width: calc((100% / 24) * 17 - var(--gap));
}
.niu-col-18 {
width: calc((100% / 24) * 18 - var(--gap));
}
.niu-col-19 {
width: calc((100% / 24) * 19 - var(--gap));
}
.niu-col-20 {
width: calc((100% / 24) * 20 - var(--gap));
}
.niu-col-21 {
width: calc((100% / 24) * 21 - var(--gap)) ;
}
.niu-col-22 {
width: calc((100% / 24) * 22 - var(--gap));
}
.niu-col-23 {
width: calc((100% / 24) * 23 - var(--gap));
}
.niu-col-24 {
width: calc((100% / 24) * 24 - var(--gap));
}
下面是html應用結果：經過測試沒有問題。----部落格園老牛大講堂
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./css/niu.css"> </head> <body> <div class="niu-container"> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1"niu-bg-green>1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green ">1/24</div> <div class="niu-col-1 niu-bg-green ">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> </div> </body> </html>
執行結果：不管螢幕多窄，元素總能保持在一行。歡迎各位大神，前來指正，我將不斷改進我的程式碼----部落格園老牛大講堂
