v7.1.0

Flex

Table of Contents

Detail

共通モディファイアで Flexbox 子要素の幅を変更するユーティリティ CSS。

Basic

.is-(value) の形式で利用します。

Flex
<div class="grid is-gap-xs">
  <div class="column">
    <button class="button is-plain is-primary is-full" type="button">ボタンA</button>
  </div>
  <div class="column">
    <button class="button is-outline is-danger is-full" type="button">ボタンB</button>
  </div>
</div>
等分して伸縮12 分割からの指定100% に広がる元のサイズを保持
.is-0.is-1 ~ .is-12.is-full.is-auto
Warning

レイアウトの Grid で使うことを推奨します。エレメントに使っても基本的には問題ありませんが、Margin を付与した場合に余剰が発生し、意図しない段落ちがおきます。

Media Query

.is-(mediaquery)-(value) の形式で、Media Query に応じた flex プロパティの変更を行えます。

Mobile First

等分して伸縮12 分割からの指定100% に広がる元のサイズを保持
.is-mobile-0.is-mobile-1 ~ .is-mobile-12.is-mobile-full.is-mobile-auto
.is-fablet-0.is-fablet-1 ~ .is-fablet-12.is-fablet-full.is-fablet-auto
.is-tablet-0.is-tablet-1 ~ .is-tablet-12.is-tablet-full.is-tablet-auto
.is-desktop-0.is-desktop-1 ~ .is-desktop-12.is-desktop-full.is-desktop-auto
.is-wide-0.is-wide-1 ~ .is-wide-12.is-wide-full.is-wide-auto

Size Only

Option の $option-add-style-flex-only を true にすると、ウィンドウサイズを限定した flex プロパティの適応が可能になります。

等分して伸縮12 分割からの指定100% に広がる元のサイズを保持
.is-iphone5-only-0.is-iphone5-only-1 ~ .is-iphone5-only-12.is-iphone5-only-full.is-iphone5-only-auto
.is-mobile-only-0.is-mobile-only-1 ~ .is-mobile-only-12.is-mobile-only-full.is-mobile-only-auto
.is-fablet-only-0.is-fablet-only-1 ~ .is-fablet-only-12.is-fablet-only-full.is-fablet-only-auto
.is-tablet-only-0.is-tablet-only-1 ~ .is-tablet-only-12.is-tablet-only-full.is-tablet-only-auto
.is-desktop-only-0.is-desktop-only-1 ~ .is-desktop-only-12.is-desktop-only-full.is-desktop-only-auto

Landscape

Option の $option-add-style-flex-landscape を true にすると、横向きに限定した flex プロパティの適応が可能になります。（all 無しは Tablet サイズ以下のみ）

等分して伸縮12 分割からの指定100% に広がる元のサイズを保持
.is-landscape-0.is-landscape-1 ~ .is-landscape-12.is-landscape-full.is-landscape-auto
.is-landscape-all-0.is-landscape-all-1 ~ .is-landscape-all-12.is-landscape-all-full.is-landscape-all-auto

Portrait

Option の $option-add-style-flex-portrait を true にすると、縦向きに限定した flex プロパティの適応が可能になります。（all 無しは Tablet サイズ以下のみ）

等分して伸縮12 分割からの指定100% に広がる元のサイズを保持
.is-portrait-0.is-portrait-1 ~ .is-portrait-12.is-portrait-full.is-portrait-auto
.is-portrait-all-0.is-portrait-all-1 ~ .is-portrait-all-12.is-portrait-all-full.is-portrait-all-auto

Browser

Option の $option-add-style-size-browser を true にすると、ブラウザを限定した flex プロパティの適応が可能になります。

等分して伸縮12 分割からの指定100% に広がる元のサイズを保持
.is-chrome-0.is-chrome-1 ~ .is-chrome-12.is-chrome-full.is-chrome-auto
.is-firefox-0.is-firefox-1 ~ .is-firefox-12.is-firefox-full.is-firefox-auto
.is-edge-0.is-edge-1 ~ .is-edge-12.is-edge-full.is-edge-auto
.is-ie-0.is-ie-1 ~ .is-ie-12.is-ie-full.is-ie-auto

Split

SCSS 変数 $flex-split のオーバーライドで 12 等分を別の数に変更できます。

Important

Option の $option-important-flex を true にすると、全プロパティに !important を付与できます。

Variables

Name
Default Value
  • Name
    $modifier-flex
    Default Value
    .is
  • Name
    $modifier-flex-mobile
    Default Value
    .is-mobile
  • Name
    $modifier-flex-fablet
    Default Value
    .is-fablet
  • Name
    $modifier-flex-tablet
    Default Value
    .is-tablet
  • Name
    $modifier-flex-desktop
    Default Value
    .is-desktop
  • Name
    $modifier-flex-wide
    Default Value
    .is-wide
  • Name
    $modifier-flex-iphone5-only
    Default Value
    .is-iphone5-only
  • Name
    $modifier-flex-mobile-only
    Default Value
    .is-mobile-only
  • Name
    $modifier-flex-fablet-only
    Default Value
    .is-fablet-only
  • Name
    $modifier-flex-tablet-only
    Default Value
    .is-mobile-only
  • Name
    $modifier-flex-desktop-only
    Default Value
    .is-desktop-only
  • Name
    $modifier-flex-landscape
    Default Value
    .is-landscape
  • Name
    $modifier-flex-landscape-all
    Default Value
    .is-landscape-all
  • Name
    $modifier-flex-portrait
    Default Value
    .is-portrait
  • Name
    $modifier-flex-portrait-all
    Default Value
    .is-portrait-all
  • Name
    $modifier-flex-chrome
    Default Value
    .is-chrome
  • Name
    $modifier-flex-firefox
    Default Value
    .is-firefox
  • Name
    $modifier-flex-edge
    Default Value
    .is-edge
  • Name
    $modifier-flex-ie
    Default Value
    .is-ie
  • Name
    $suffix-flex-pipe
    Default Value
    -
  • Name
    $suffix-flex-grow
    Default Value
    -0
  • Name
    $suffix-flex-full
    Default Value
    -full
  • Name
    $suffix-flex-auto
    Default Value
    -auto
  • Name
    $flex-split
    Default Value
    12
  • Name
    $flex-important
    Default Value
    if($option-important-flex == true, !important, null)

Mixins

  • musubii-style-flex-grow()
  • musubii-style-flex-split($i)
  • musubii-style-flex-full()
  • musubii-style-flex-auto()

Sources