@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协议
网络平台如需转载必须与本人联系确认。
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123