這一期我們繼續(xù)完成我們的網(wǎng)格布局

容器類

通過(guò)一個(gè) # 占位符，來(lái)減少代碼輸出量。

#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 復(fù)制代碼

基于浮動(dòng)的網(wǎng)格布局

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

.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) 復(fù)制代碼

基于 flex 的網(wǎng)格布局

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

而主軸對(duì)齊方式用到了 tyuio 幾個(gè)字母，u 在中間所以代表居中，t 左邊，o 右邊，tuo 代表元素之間有間隔，yui 代表開(kāi)始結(jié)束的也有間隔。副軸的我就沒(méi)有繼續(xù)添加了。

.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) 復(fù)制代碼

響應(yīng)式

添加響應(yīng)式功能

// 響應(yīng)式 @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) 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5b5c6146f265da0f491bb2ca

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。