@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协议网络平台如需转载必须与本人联系确认。