共通レイアウト @mixin_html/css_WEB-ITnose

単一のブロックレベル要素の中央揃え

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

1行を占める複数のブロックレベル要素

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

複数のブロックレベル要素が1行を占有, ある要素を残りの部分を占有します

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実装

参考リンク

ほぼ完全なガイドフレックスボックスへ (フレックスボックスなし)
フレックス レイアウト チュートリアル: 文法

---

この記事はクリエイティブ コモンズ CC BY-NC-SA 4.0 契約に準拠しています

ネットワーク プラットフォームに転載したい場合は、確認のために私に連絡する必要があります。