資訊專(zhuān)欄INFORMATION COLUMN
摘要：基于的網(wǎng)格布局代表單行結(jié)構(gòu)。而主軸對(duì)齊方式用到了幾個(gè)字母，在中間所以代表居中，左邊，右邊，代表元素之間有間隔，代表開(kāi)始結(jié)束的也有間隔。副軸的我就沒(méi)有繼續(xù)添加了。
這一期我們繼續(xù)完成我們的網(wǎng)格布局
容器類(lèi)通過(guò)一個(gè) # 占位符，來(lái)減少代碼輸出量。
#container
padding-right: 15px
padding-left: 15px
margin-right: auto
margin-left: auto
.container
width: 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
&-fluid
width: 100%
@extend #container
基于浮動(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)
基于 flex 的網(wǎng)格布局
row 代表單行結(jié)構(gòu)。下面的一些鍵盤(pán)組合代表的方位，比如 jk ，先按 j 再按 k，代表著從左往右，而 kj 則從右往左，jn 和 nj 類(lèi)似。
而主軸對(duì)齊方式用到了 tyuio 幾個(gè)字母，u 在中間所以代表居中，t 左邊，o 右邊，tuo 代表元素之間有間隔，yui 代表開(kāi)始結(jié)束的也有間隔。副軸的我就沒(méi)有繼續(xù)添加了。
.fl-gird
display: flex
flex-wrap: wrap
&.row
flex-wrap: no-wrap
&.kj
flex-direction: row-reverse
&.jn
flex-direction: column
&.nj
flex-direction: column-reverse
&.u
justify-content: center
&.t
justify-content: flex-start
&.o
justify-content: flex-right
&.tuo
justify-content: space-between
&.yui
justify-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)
響應(yīng)式
添加響應(yīng)式功能
// 響應(yīng)式
@for $i from 1 through 12
.fa-gird .is-media1-#{$i},
.fl-gird .is-media1-#{$i}
+media1
width: percentage($i / 12)
.fa-gird .is-media2-#{$i},
.fl-gird .is-media2-#{$i}
+media2
width: percentage($i / 12)
.fa-gird .is-media3-#{$i},
.fl-gird .is-media3-#{$i}
+media3
width: percentage($i / 12)
.fa-gird .is-media4-#{$i},
.fl-gird .is-media4-#{$i}
+media4
width: percentage($i / 12)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113596.html
摘要：用到什么了在多頁(yè)應(yīng)用架構(gòu)系列二配置常用部分有哪些里我就說(shuō)過(guò)，的核心只能打包文件，而以外的資源都是靠進(jìn)行轉(zhuǎn)換或做出相應(yīng)的處理的。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006897458如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
閱讀 1125·2021-11-24 10:21
閱讀 2561·2021-11-19 11:35
閱讀 1661·2019-08-30 15:55
閱讀 1293·2019-08-30 15:54
閱讀 1192·2019-08-30 15:53
閱讀 3498·2019-08-29 17:21
閱讀 3308·2019-08-29 16:12
閱讀 3412·2019-08-29 15:23
