常用布局@mixin_html/css

来源：动视网责编：小采时间：2020-11-27 16:26:56

常用布局@mixin_html/css

常用布局@mixin_html/css_WEB-ITnose:单个块级元素的居中 @mixin center-block() { display: block; margin-left: auto; margin-right: auto;} 多个块级元素占一行用 display: inline-block 来实现 @mixin row($parent-selector, $item-selecto

推荐度：

点击下载本文 文档为doc格式

导读常用布局@mixin_html/css_WEB-ITnose:单个块级元素的居中 @mixin center-block() { display: block; margin-left: auto; margin-right: auto;} 多个块级元素占一行用 display: inline-block 来实现 @mixin row($parent-selector, $item-selecto

单个块级元素的居中

@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; }}