フレックス

フレックスボックスの機能を活用して、幅広いレイアウトを作成します。

Flexコンポーネントは、UIkitでのレイアウト構築において重要な役割を果たします。多くのコンポーネント（例：グリッドや、ナビゲーションバー、サブナビゲーション、パンくずリスト、ページネーション、タブ、ドットナビゲーションなどの水平方向のナビゲーション）はフレックスボックスを使用して構築されており、このコンポーネントのユーティリティクラスと組み合わせて使用できます。

使用方法

フレックスボックスレイアウトモデルを適用するには、次のいずれかのクラスを使用します。デフォルトでは、すべてのフレックスアイテムは左揃えになり、コンテンツの幅と同じ幅になり、高さが揃えられます。

クラス	説明
`.uk-flex`	フレックスコンテナを作成し、ブロック要素として動作します。
`.uk-flex-inline`	フレックスコンテナを作成し、インライン要素として動作します。

<div class="uk-flex">
    <div></div>
</div>

アイテム1

アイテム2

アイテム3

<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

水平方向の配置

これらのクラスは、フレックスアイテムの水平方向の配置と、それらの間のスペースの分配を定義します。配置を構成するには、フレックスコンテナにこれらのクラスの1つ以上を追加します。デフォルトでは、フレックスアイテムは左揃えになり、` .uk-flex-left`クラスと同じです。

クラス	説明
`.uk-flex-left`	フレックスアイテムを左揃えにするためにこのクラスを追加します。
`.uk-flex-center`	主軸に沿ってフレックスアイテムを中央揃えにするためにこのクラスを追加します。
`.uk-flex-right`	フレックスアイテムを右揃えにするためにこのクラスを追加します。
`.uk-flex-between`	アイテムを均等に分散し、主軸に沿ってアイテム間に等間隔を空けるためにこのクラスを追加します。
`.uk-flex-around`	各アイテムの両側に等間隔でアイテムを均等に分散するためにこのクラスを追加します。
`.uk-flex-left@s` `.uk-flex-center@s` `.uk-flex-right@s` `.uk-flex-between@s` `.uk-flex-around@s`	640px以上のデバイス幅にのみ影響します。
`.uk-flex-left@m` `.uk-flex-center@m` `.uk-flex-right@m` `.uk-flex-between@m` `.uk-flex-around@m`	960px以上のデバイス幅にのみ影響します。
`.uk-flex-left@l` `.uk-flex-center@l` `.uk-flex-right@l` `.uk-flex-between@l` `.uk-flex-around@l`	1200px以上のデバイス幅にのみ影響します。
`.uk-flex-left@xl` `.uk-flex-center@xl` `.uk-flex-right@xl` `.uk-flex-between@xl` `.uk-flex-around@xl`	1600px以上のデバイス幅にのみ影響します。

<div class="uk-flex uk-flex-center">
    <div></div>
</div>

アイテム1

アイテム2

アイテム3

<div class="uk-flex uk-flex-center">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

<div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <div></div>
</div>

アイテム1

アイテム2

アイテム3

<div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

垂直方向の配置

これらのクラスは、フレックスアイテムの垂直方向の配置を定義します。デフォルトでは、フレックスアイテムはコンテナの高さを満たし、` .uk-flex-stretch`クラスと同じです。

クラス	説明
`.uk-flex-stretch`	親の高さを満たすようにフレックスアイテムを拡張するためにこのクラスを追加します。
`.uk-flex-top`	フレックスアイテムを上揃えにするためにこのクラスを追加します。
`.uk-flex-middle`	交差軸に沿ってフレックスアイテムを中央揃えにするためにこのクラスを追加します。
`.uk-flex-bottom`	フレックスアイテムを下揃えにするためにこのクラスを追加します。
`.uk-flex-stretch@s` `.uk-flex-top@s` `.uk-flex-middle@s` `.uk-flex-bottom@s`	640px以上のデバイス幅にのみ影響します。
`.uk-flex-stretch@m` `.uk-flex-top@m` `.uk-flex-middle@m` `.uk-flex-bottom@m`	960px以上のデバイス幅にのみ影響します。
`.uk-flex-stretch@l` `.uk-flex-top@l` `.uk-flex-middle@l` `.uk-flex-bottom@l`	1200px以上のデバイス幅にのみ影響します。
`.uk-flex-stretch@xl` `.uk-flex-top@xl` `.uk-flex-middle@xl` `.uk-flex-bottom@xl`	1600px以上のデバイス幅にのみ影響します。

<div class="uk-flex uk-flex-middle"></div>

アイテム1

アイテム2
…

アイテム3
…
…

<div class="uk-flex uk-flex-middle uk-text-center">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2<br>…</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3<br>…<br>…</div>
</div>

方向修飾子

これらのクラスは、フレックスアイテムが配置される軸とその方向を定義します。デフォルトでは、アイテムは左から右に水平に並びます。` .uk-flex-row`クラスと同じです。

クラス	説明
`.uk-flex-row`	フレックスアイテムを水平方向の行として配置するためにこのクラスを追加します。
`.uk-flex-row-reverse`	フレックスアイテムを右から左に配置するためにこのクラスを追加します。
`.uk-flex-column`	フレックスアイテムを垂直方向の列として配置するためにこのクラスを追加します。
`.uk-flex-column-reverse`	フレックスアイテムを下から上に配置するためにこのクラスを追加します。
`.uk-flex-row@s` `.uk-flex-column@s`	640px以上のデバイス幅にのみ影響します。
`.uk-flex-row@m` `.uk-flex-column@m`	960px以上のデバイス幅にのみ影響します。
`.uk-flex-row@l` `.uk-flex-column@l`	1200px以上のデバイス幅にのみ影響します。
`.uk-flex-row@xl` `.uk-flex-column@xl`	1600px以上のデバイス幅にのみ影響します。

<div class="uk-flex uk-flex-column"></div>

アイテム1

アイテム2

アイテム3

<div class="uk-flex uk-flex-column uk-width-1-3">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 3</div>
</div>

折り返し修飾子

デフォルトでは、フレックスアイテムは1行に収まり、左から右に並びます。フレックスアイテムの折り返しの動作を変更するには、これらのクラスのいずれかを追加します。

クラス	説明
`.uk-flex-wrap`	コンテナに収まらなくなった場合にフレックスアイテムを別の行に折り返すためにこのクラスを追加します。
`.uk-flex-wrap-reverse`	アイテムの方向を右から左に変更するためにこのクラスを追加します。
`.uk-flex-nowrap`	フレックスアイテムを1行に強制するためにこのクラスを追加します。これはデフォルトの動作です。

次のクラスは、折り返されたフレックスアイテムの配置を変更します。

クラス	説明
`.uk-flex-wrap-stretch`	残りのスペースを占めるようにアイテム行を伸縮させるためにこのクラスを追加します。
`.uk-flex-wrap-between`	アイテム行を均等に分散し、最初の行を上、最後の行をコンテナの下部に配置するためにこのクラスを追加します。
`.uk-flex-wrap-around`	各行の上部と下部に等間隔でアイテム行を均等に分散するためにこのクラスを追加します。
`.uk-flex-wrap-top`	複数行のフレックスアイテムを上揃えにするためにこのクラスを追加します。
`.uk-flex-wrap-middle`	複数行のフレックスアイテムを垂直方向に中央揃えにするためにこのクラスを追加します。
`.uk-flex-wrap-bottom`	複数行のフレックスアイテムを下揃えにするためにこのクラスを追加します。

<div class="uk-flex uk-flex-wrap uk-flex-wrap-around"></div>

アイテム1

アイテム2

アイテム3

アイテム4

アイテム5

アイテム6

<div class="uk-flex uk-flex-wrap uk-flex-wrap-around uk-background-muted uk-height-medium">
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 2</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 4</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small">Item 5</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 6</div>
</div>

アイテムの順序

デフォルトでは、フレックスアイテムはソースの順序に従って配置されます。特定のアイテムを最初または最後に表示するには、これらのクラスのいずれかを追加するだけです。

クラス	説明
`.uk-flex-first`	アイテムを最初として表示します。
`.uk-flex-last`	アイテムを最後として表示します。
`.uk-flex-first@s` `.uk-flex-last@s`	640px以上のデバイス幅にのみ影響します。
`.uk-flex-first@m` `.uk-flex-last@m`	960px以上のデバイス幅にのみ影響します。
`.uk-flex-first@l` `.uk-flex-last@l`	1200px以上のデバイス幅にのみ影響します。
`.uk-flex-first@xl` `.uk-flex-last@xl`	1600px以上のデバイス幅にのみ影響します。

<div class="uk-flex">
  <div></div>
  <div class="uk-flex-first"></div>
</div>

アイテム1

アイテム2

アイテム3

<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body uk-flex-last uk-margin-left">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-flex-first">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

アイテムの寸法

フレックスアイテムが占めるスペースを決定するには、アイテムに次のクラスのいずれかを追加します。デフォルトでは、アイテムはコンテンツによってサイズが決まりますが、縮小することは許可されます。

クラス	説明
`.uk-flex-initial`	ボックスのサイズはコンテンツによって決定されますが、縮小します。
`.uk-flex-none`	ボックスのサイズはコンテンツによって決定されます。
`.uk-flex-auto`	アイテムのコンテンツを考慮してスペースが割り当てられます。
`.uk-flex-1`	スペースはフレックスに基づいてのみ割り当てられます。
`.uk-flex-initial@s` `.uk-flex-none@s` `.uk-flex-1@s`	640px以上のデバイス幅にのみ影響します。
`.uk-flex-initial@m` `.uk-flex-none@m` `.uk-flex-1@m`	960px以上のデバイス幅にのみ影響します。
`.uk-flex-initial@l` `.uk-flex-none@l` `.uk-flex-1@l`	1200px以上のデバイス幅にのみ影響します。
`.uk-flex-initial@xl` `.uk-flex-none@xl` `.uk-flex-1@xl`	1600px以上のデバイス幅にのみ影響します。

フレックスとグリッド

Flexコンポーネントは、グリッドコンポーネントのグリッドと組み合わせることができます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

<div class="uk-flex-middle" uk-grid>
    <div class="uk-width-2-3@m">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
    <div class="uk-width-1-3@m uk-flex-first">
        <img src="images/light.jpg" width="1800" height="1200" alt="Image">
    </div>
</div>

ドキュメント

フレックス