> 웹 프론트엔드 > HTML 튜토리얼 > 常用布局 @mixin_html/css_WEB-ITnose

常用布局 @mixin_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:18:55
원래의
1301명이 탐색했습니다.

单个块级元素的居中

@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;  }}
로그인 후 복사

完整源码

  • _layout.scss
  • flex 实现

参考链接

  • Almost complete guide to flexbox (without flexbox)
  • Flex 布局教程:语法篇

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿