起因：
从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>
运行结果：不管屏幕多窄，元素总能保持在一行。欢迎各位大神，前来指正，我将不断改进我的代码----博客园老牛大讲堂
标签：24,框架,零学,--,100%,gap,var,niu,Niu From： https://www.cnblogs.com/laonniudajiangtang/p/18173514