常用布局 @mixin

字数 165阅读 1398

单个块级元素的居中

@mixin center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

多个块级元素占一行

display: inline-block 来实现

@mixin row($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top) {
  #{$parent-selector} {
    font-size: 0;// 防止子元素的空白元素占据空间
  }
  #{$item-selector} {
    display: inline-block;
    vertical-align: $vertical-align;// 防止子元素高度不同导致的奇怪的对齐
    font-size: $font-size;
  }
}

用 flex 来实现

@mixin row() {
  display: flex;
}

多个块级元素的居中

display: inline-block 来实现

@mixin center-blocks($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top) {
  @include row($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top);
  #{$parent-selector} {
    text-align: center;
  }
}

用 flex 来实现

@mixin center-blocks($parent-selector) {
  #{$parent-selector} {
    @include row;
    justify-content: center;
  }
}

两端对齐

display: inline-block 来实现

@mixin justify-blocks($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top) {
  @include row($parent-selector, $item-selector, $font-size: 12px, $vertical-align: top);
  #{$parent-selector} {
    text-align: justify;
    &:after {
      content: '';
      display: inline-block;
      width: 100%;
    }
  }
}

用 flex 来实现

@mixin justify-blocks($parent-selector) {
  #{$parent-selector} {
    @include row;
    justify-content: space-between;
  }
}

多个块级元素占一行,某个元素占据剩余部分

display: table 来实现

@mixin item-fill($parent-selector, $item-selector, $fill-item-selector, $vertical-align: top) {
  #{$parent-selector} {
    display: table; // 兼容性相当好。IE8+ 都支持 http://caniuse.com/#feat=css-table
  }
  #{$item-selector} {
    display: table-cell; // 兼容性相当好。IE8+ 都支持 http://caniuse.com/#feat=css-table
    vertical-align: $vertical-align;
  }
  #{$fill-item-selector} {
    width: 100%;
  }
}

用 flex 来实现

@mixin item-fill($parent-selector,  $fill-item-selector) {
  #{$parent-selector} {
    @include row;
  }
  #{$fill-item-selector} {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
}

完整源码

参考链接


本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
  • 简书的Markdown貌似不支持插入iframe,所以文章里的JSFiddle示例都改做截图了,如果有需要可以点击...
  • 当身边有几个性格直爽,口直心快的朋友围绕着你,你特别在意他们给予你的评价,当然朋友们也能或多或少意识到你的不自然,...