オーバーフロー

これらの簡易ユーティリティを使用して、コンテンツが要素からオーバーフローする方法をすばやく構成します。

overflow4 つのデフォルト値とクラスを使用して、その場でプロパティを調整します。これらのクラスは、デフォルトではレスポンシブではありません。

.overflow-autoこれは、幅と高さの寸法が設定された要素で使用する例です。設計上、このコンテンツは垂直方向にスクロールします。

.overflow-hiddenこれは、幅と高さの寸法が設定された要素で使用する例です。

.overflow-visibleこれは、幅と高さの寸法が設定された要素で使用する例です。

.overflow-scrollこれは、幅と高さの寸法が設定された要素で使用する例です。

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

$overflowsSass 変数を使用すると、の変数を変更してオーバーフローユーティリティをカスタマイズできます_variables.scss。

サス

ユーティリティ API

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

    "overflow": (
      property: overflow,
      values: auto hidden visible scroll,
    ),