整列

インラインの水平方向整列

text-alignプロパティを設定するユーティリティクラスです。テキストやインラインの要素を水平方向に整列させます。各クラス名に対応した整列方向を指定することができます。

<p class="su-align-right">このテキストは右寄せに整列します。</p>

クラス名の一覧

インラインの垂直方向整列

vertical-alignプロパティを設定するユーティリティクラスです。テキストやインラインの要素を垂直方向に整列させます。各クラス名に対応した整列方向を指定することができます。テーブルセル内の整列にも使用できます。

<!-- テキスト -->
<p>
  次のテキストは段落に対して
  <span class="su-align-top">上揃え</span>
  <span class="su-align-baseline">ベースライン上</span>
  に整列します。
</p>

<!-- 表組みセル -->
<table>
  <tr>
    <td class="su-align-bottom">テキストはセル内で下揃えに整列します</td>
    <td class="su-align-middle">テキストはセル内で中央揃えに整列します</td>
  </tr>
</table>

クラス名の一覧

ブロックの水平方向整列

ブロック要素を水平方向に整列させるユーティリティクラスです。左右・インライン方向のmarginが適用され、各クラス名に対応した方向に整列させることができます。

<div class="su-block-center">このブロック要素は中央寄せで配置されます。</div>

クラス名の一覧

justify-content

justify-contentプロパティを設定するユーティリティクラスです。各クラス名に対応した、フレックスボックスレイアウトの主軸方向の整列、グリッドレイアウトのインライン軸方向の整列を指定します。

<!-- フレックスアイテム要素を両端揃え均等に配置 -->
<div class="su-flex su-justify-content-between">
  <span>...</span>
  <span>...</span>
  <span>...</span>
  ...
</div>

クラス名の一覧

justify-items

justify-itemsプロパティを設定するユーティリティクラスです。グリッドレイアウトにおけるそれぞれのアイテム要素に対して、各クラス名に対応したインライン軸方向の整列を指定します。

※このユーティリティクラスはフレックスボックスレイアウトでは有効ではありません。グリッドレイアウトで使用します。

<!-- 列のグリッドトラックに合わせて各アイテム要素を末尾に寄せて配置 -->
<div class="su-grid su-justify-items-end">
  <span>...</span>
  <span>...</span>
  <span>...</span>
  ...
</div>

クラス名の一覧

justify-self

justify-selfプロパティを設定するユーティリティクラスです。グリッドレイアウトにおける個別のアイテム要素に対して、各クラス名に対応したインライン軸方向の整列を指定します。

※このユーティリティクラスはフレックスボックスレイアウトでは有効ではありません。グリッドレイアウトで使用します。

<!-- 列のグリッドトラックに合わせて各アイテム要素をそれぞれ個別に配置 -->
<div class="su-grid">
  <span class="su-justify-self-start">アイテムの先頭に寄せて配置</span>
  <span class="su-justify-self-center">アイテムの中央に寄せて配置</span>
  <span class="su-justify-self-end">アイテムの末尾に寄せて配置</span>
  ...
</div>

クラス名の一覧

align-items

align-itemsプロパティを設定するユーティリティクラスです。各クラス名に対応した、フレックスボックスレイアウトの交差軸方向の整列、グリッドレイアウトのブロック軸方向の整列を指定します。

<!-- フレックスアイテム要素を中央揃えに配置 -->
<div class="su-flex su-align-items-center">
  <span>...</span>
  <span>...</span>
  <span>...</span>
  ...
</div>

クラス名の一覧

align-self

align-selfプロパティを設定するユーティリティクラスです。フレックスボックスレイアウトにおけるフレックスアイテム要素、また、グリッドレイアウトにおける個別のアイテム要素に対して、各クラス名に対応した交差軸・ブロック軸方向の整列を指定します。

<!-- 各フレックスアイテム要素をそれぞれ個別に配置 -->
<div class="su-flex">
  <span class="su-align-self-start">フレックスコンテナーの上揃えで配置</span>
  <span class="su-align-self-center">フレックスコンテナーの中央揃えで配置</span>
  <span class="su-align-self-end">フレックスコンテナーの下揃えで配置</span>
  ...
</div>

クラス名の一覧

align-content

align-contentプロパティを設定するユーティリティクラスです。フレックスボックスレイアウトおよびグリッドレイアウトのコンテナ要素全体に対して、交差軸・ブロック軸方向へのアイテム要素の整列を指定します。

※このユーティリティクラスはフレックスボックスレイアウトにおいて、フレックスアイテムが複数行にわたり折り返されて表示されている場合に整列されるようになります。

<!-- 折り返して複数行に表示された各フレックスアイテム要素をそれぞれ上下方向に均等に余白をつけて配置 -->
<div class="su-flex su-align-content-around su-flex-wrap">
  <span>...</span>
  <span>...</span>
  <span>...</span>
  ...
</div>

クラス名の一覧