开发一个自己的 CSS 框架(五)

这一期我们继续完成我们的网格布局

容器类

通过一个 # 占位符,来减少代码输出量。

#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

基于浮动的网格布局

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-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)

响应式

添加响应式功能

// 响应式
@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)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,806评论 0 2
  • 这一节,我们来讲规矩,谈网格,做人可以不要脸,不讲规矩,不讲道理(特指傲娇兽),但底线还是要有的,如同网格一样,不...
    Nodelover阅读 398评论 0 0
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,181评论 0 59
  • 简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,旨在改变我们基于网格设计的用户界面方式...
    咕咚咚bells阅读 2,558评论 0 4
  • 因为过敏性鼻炎,有了跑步的想法;在泽宇的鼓励和指导下,我跑了两年多,跑程已经超过2000公里,参加了半马比赛。 因...
    珠海兔子阅读 511评论 0 2