這一期我們繼續完成我們的網格布局

容器類

通過一個 # 占位符，來減少代碼輸出量。

#containerpadding-right: 15pxpadding-left: 15pxmargin-right: automargin-left: auto.containerwidth: 100%@extend #container@media screen and (min-width: $media-size-1)max-width: $media-size-box-1@media screen and (min-width: $media-size-2)max-width: $media-size-box-2@media screen and (min-width: $media-size-3)max-width: $media-size-box-3@media screen and (min-width: $media-size-4)max-width: $media-size-box-4&-fluidwidth: 100%@extend #container 復制代碼

基于浮動的網格布局

jeet 里面的函數參數挺多的，我們只用一個即可，封裝的太高了，不太好契合。percentage 可以用來得到百分比。

.fa-gird+clearfix@for $i from 1 through 12.is-#{$i}+column($i/12)@for $j from 1 through 12&.offset-#{$j}margin-left: percentage($j / 12)&.span@for $i from 1 through 12.is-#{$i}+span($i/12) 復制代碼

基于 flex 的網格布局

row 代表單行結構。下面的一些鍵盤組合代表的方位，比如 jk ，先按 j 再按 k，代表著從左往右，而 kj 則從右往左，jn 和 nj 類似。

而主軸對齊方式用到了 tyuio 幾個字母，u 在中間所以代表居中，t 左邊，o 右邊，tuo 代表元素之間有間隔，yui 代表開始結束的也有間隔。副軸的我就沒有繼續添加了。

.fl-girddisplay: flexflex-wrap: wrap&.rowflex-wrap: no-wrap&.kjflex-direction: row-reverse&.jnflex-direction: column&.njflex-direction: column-reverse&.ujustify-content: center&.tjustify-content: flex-start&.ojustify-content: flex-right&.tuojustify-content: space-between&.yuijustify-content: space-around@for $i from 1 through 12.is-#{$i}width: percentage($i / 12)@for $j from 1 through 12&.offset-#{$j}margin-left: percentage($j / 12) 復制代碼

響應式

添加響應式功能

// 響應式 @for $i from 1 through 12.fa-gird .is-media1-#{$i},.fl-gird .is-media1-#{$i}+media1width: percentage($i / 12).fa-gird .is-media2-#{$i},.fl-gird .is-media2-#{$i}+media2width: percentage($i / 12).fa-gird .is-media3-#{$i},.fl-gird .is-media3-#{$i}+media3width: percentage($i / 12).fa-gird .is-media4-#{$i},.fl-gird .is-media4-#{$i}+media4width: percentage($i / 12) 復制代碼

轉載于:https://juejin.im/post/5b5c6146f265da0f491bb2ca

總結

以上是生活随笔為你收集整理的开发一个自己的 CSS 框架（五）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。