概要(Overview)
これらのユーティリティクラスは、CSSの float
プロパティを使用して現在のビューポートサイズに基づいて水平方向の配置を行頭や行末に寄せるか無効にする。特異性の問題を避けるために !important
を組み込んでいる。これらはグリッドシステムと同じビューポート幅のブレークポイントを使用。floatユーティリティはFlexアイテムには影響しないので注意。
配置の種類 見やすいよう色と枠を付けています
●要素全体を行頭揃え(.float-start
)v5.0.0-beta1クラス名変更
行頭揃え部分
●要素全体を行末揃え(.float-end
)v5.0.0-beta1クラス名変更
行末揃え部分
●要素全体を動かさない(.float-none
)
動かさない部分
設定例
<div class="float-end">...</div>
【設定】
- 設定したい要素に
.float-{side}
(上記の「配置の種類」から選択)を入れる {side}
は、start
(行頭)、end
(行末)、none
(なし) のいずれかを選択
【注意】
- テキストの配置を設定する場合は、文字の行頭揃え/行末揃え/中央揃えに記載
- 要素全体の中央揃えについては、要素の中央揃えに記載
- 配置のクリアについては、クリアフィックスに記載
- Flexboxでの行頭揃え/行末揃え等については、主軸方向のアイテムの整列に記載
- 縦方向の配置を設定する場合は、縦の配置ユーティリティに記載
【変更履歴】
- 【v5.0.0-alpha1】
float()
mixinを削除
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
- 行頭揃え:
.float-left
⇒.float-start
- 行末揃え:
.float-right
⇒.float-end
- 行頭揃え:
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
レスポンシブ(Responsive)v5.0.0-alpha1クラス追加、v5.0.0-beta1一部クラス名変更
定義済みクラスの種類 見やすいよう色と枠を付けています
●要素全体を行頭揃え(float: start
)v5.0.0-beta1クラス名変更
.float-start
:全てのビューポートサイズで行頭揃え.float-sm-start
:ビューポートサイズ小以上で行頭揃え.float-md-start
:ビューポートサイズ中以上で行頭揃え.float-lg-start
:ビューポートサイズ大以上で行頭揃え.float-xl-start
:ビューポートサイズ特大以上で行頭揃え.float-xxl-start
:ビューポートサイズ超特大以上で行頭揃え v5.0.0-alpha1追加●要素全体を行末揃え(float: right
)v5.0.0-beta1クラス名変更
.float-end
:全てのビューポートサイズで行末揃え.float-sm-end
:ビューポートサイズ小以上で行末揃え.float-md-end
:ビューポートサイズ中以上で行末揃え.float-lg-end
:ビューポートサイズ大以上で行末揃え.float-xl-end
:ビューポートサイズ特大以上で行末揃え.float-xl-end
:ビューポートサイズ超特大以上で行末揃え v5.0.0-alpha1追加●要素全体を動かさない(float: none
)
.float-none
:全てのビューポートサイズでnone.float-sm-none
:ビューポートサイズ小以上でnone.float-md-none
:ビューポートサイズ中以上でnone.float-lg-none
:ビューポートサイズ大以上でnone.float-xl-none
:ビューポートサイズ特大以上でnone.float-xxl-none
:ビューポートサイズ超特大以上でnone v5.0.0-alpha1追加設定例
<div class="float-sm-end">...</div>
【設定】
- 設定したい要素に
.float(-{breakpoint})-{side}
(上記の「定義済みクラスの種類」から選択)を入れる {breakpoint}
(sm
(小),md
(中),lg
(大),xl
(特大),xxl
(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる{side}
は、start
(行頭)、end
(行末)、none
(なし) のいずれかを選択
【変更履歴】
- 【v5.0.0-alpha1】
.float-xxl-{side}
が追加
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
- 行頭揃え:
.float(-{breakpoint})-left
⇒.float(-{breakpoint})-start
- 行末揃え:
.float(-{breakpoint})-right
⇒.float(-{breakpoint})-end
- 行頭揃え:
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更