フロート Float

レスポンシブfloatユーティリティを使用して、任意のブレークポイントで任意の要素のfloatを切り替えます。

On this page

概要

これらのユーティリティクラスは、CSS floatプロパティを使用して、現在のビューポートサイズに基づいて要素を左または右にfloatさせるか、floatを無効にします。!importantは、特異性の問題を回避するために含まれています。これらは、gridシステムと同じビューポートブレークポイントを使用します。floatユーティリティはflex itemに影響しないことに注意してください。

Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes

html

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

親要素でfloatをクリアするには、clearfix helperを使用します。

レスポンシブ

各float値のレスポンシブバリエーションも存在します。

Float end on viewports sized SM (small) or wider

Float end on viewports sized MD (medium) or wider

Float end on viewports sized LG (large) or wider

Float end on viewports sized XL (extra large) or wider

Float end on viewports sized XXL (extra extra large) or wider

html

<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>

サポートされているすべてのクラスは次のとおりです。

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

CSS

SassユーティリティAPI

Floatユーティリティは、scss/_utilities.scssのutilities APIで宣言されています。utilities APIの使用方法を学びます。

scss/_utilities.scss

"float": (
  responsive: true,
  property: float,
  values: (
    start: left,
    end: right,
    none: none,
  )
),