DigiPress

Highly Flexible WordPress Theme

メニュー

flexbox / flexitem : 任意のコンテンツをカラム数に制限なく横並びのフレックスボックスを表示

flexbox / flexitem : 任意のコンテンツをカラム数に制限なく横並びのフレックスボックスを表示

このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です。

任意の複数コンテンツを横または縦に並べたフレックスボックスを表示できます。

パラメータ動作チェック

“flexbox”用パラメータ
direction
並び方
wrap
囲み
alignh
水平方向の寄せ方
alignv
垂直方向の寄せ方
※列表示(width指定)の場合に反映
alignitems
ボックス内における要素全体の配置
flexchildren
要素の等幅表示
※任意の要素の幅の比率を指定する場合は”flexitem”のパラメータで指定
表示結果
BOX 1
BOX 2
BOX 3
BOX 4

最もシンプルな表示例

※視認性のためサンプルは背景カラーを付けています。

1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。

このショートコード

[flexbox class="box"]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

水平方向に中央寄せした例

1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。

このショートコード

[flexbox alignh="center"]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

右寄せした例

1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。

このショートコード

[flexbox alignh="right"]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

表示幅いっぱいに等間隔に並べた例

1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。

このショートコード

[flexbox alignh="between"]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

表示幅に合わせて自動で等幅表示した例

1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。 要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。

このショートコード

[flexbox flexchildren=1]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
[/flexitem]
[/flexbox]

要素間の間隔を指定した例(5px)

1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。

要素間の間隔の既定値は 20ピクセルです。

このショートコード

[flexbox gap=5 flexchildren=1]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

3番目の要素を他の2倍の幅で自動表示した例

1つ目のコンテンツ。 flex=1
2つ目のコンテンツ。 flex=1
3つ目のコンテンツ。 この要素のみ他のサイズの2倍の幅で表示されるように指定しています。 flex=2

このショートコード

[flexbox]
[flexitem flex=1]
1つ目のコンテンツ。
flex=1
[/flexitem]
[flexitem flex=1]
2つ目のコンテンツ。
flex=1
[/flexitem]
[flexitem flex=2]
3つ目のコンテンツ。
この要素のみ他のサイズの2倍の幅で表示されるように指定しています。
flex=2
[/flexitem]
[/flexbox]

このショートコードは 親用のコード(flexbox)と子用のコード(flexitem)でネスト(入れ子)にする必要があり、子(flexitem)で括ったコンテンツが1つのフレックスアイテム分のコンテンツとなります。

指定可能なパラメータ(flexbox ※親)

direction

フレックスボックスの並び方を指定します。

未指定の場合は「row」が適用されます。

指定可能な値
  • row : 横並び/左→右 (※デフォルト)
  • rowreverse : 横並び/右→左
  • col : 縦並び/上→下
  • colreverse : 縦並び/下→上

例 : direction=rowreverse

wrap

フレックスボックスの囲み方を指定します。

未指定の場合は「nowrap」が適用されます。

指定可能な値
  • nowrap : 指定なし (※デフォルト)
  • wrap : 囲む
  • reverse : ボックスの下部から囲む

例 : wrap=reverse

alignh

フレックスボックスの水平方向の配置方法を指定します。

未指定の場合は「left」が適用されます。

指定可能な値
  • left : 左寄せ (※デフォルト)
  • right : 右寄せ
  • center : ボックスの水平中央
  • between : 左右にぴったり付けて等間隔
  • around : 左右に余白をとって内側に等間隔

例 : alignh=center

alignv

フレックスボックスの垂直方向の配置方法を指定します。

未指定の場合は無効状態となりなす。

指定可能な値
  • stretch : ボックスの高さに合わせてストレッチ
  • center : ボックス内の垂直中央
  • top : ボックスの上部に寄せる
  • bottom : ボックス下部に寄せる
  • baseline : ボックスのベースラインを基準

例 : alignv=center

alignitems

フレックスボックス内における要素全体の配置方法を指定します。

指定可能な値
  • stretch : ボックス内にストレッチ配置
  • center : 中央配置
  • start : ボックスの開始位置を基準に配置
  • end : ボックスの終了位置を基準に配置
  • baseline : ボックスのベースラインを基準

例 : alignitems=center

gap

フレックスボックス内のアイテム間の間隔をピクセル値としての数値のみで指定します。

未指定の場合は、20ピクセルのスペースが空きます。

例 : gap=40

flexchildren

ボックス内の各要素をボックスの幅に合わせて均一に等幅で自動表示する場合に「true」または「1」を指定します。

例 : flexchildren=1

width

フレックスボックス自体の表示幅を指定する場合にそのサイズをピクセル(px)、またはパーセンテージ(%)の単位を付けて指定します。

例 : width=580px, width=80% など

height

フレックスボックス自体の表示高を指定する場合にそのサイズをピクセル(px)または数値のみで指定します。

例 : height=450px, height=450 など

class

フレックスボックス自体に指定するclassがある場合にそのクラス名を指定します。

例 : class=”box-c ft13px”

style

フレックスボックス自体にスタイルシートを直接指定する場合に、そのCSSを指定します。

例 : style=”background-color:#ddd;font-size:13px;”

指定可能なパラメータ(flexitem ※子)

flex

任意のフレックス要素の表示幅(高)を他の要素の表示サイズと分けて指定する場合にその倍率を指定します。

例えば、flexitem を4つ表示し、そのうち2番目の要素のみ2倍の幅を表示する場合は、2番目のflexitemに flex=2 を指定し、他のflexitemはすべて flex=1 を指定します。

表示例
1つ目のコンテンツ。 flex=1
2つ目のコンテンツ。 flex=2 この要素のみ他のサイズの2倍の幅で表示されるように指定しています。
3つ目のコンテンツ。 flex=1

例 : flex=2

margin

フレックス要素の左右のマージンをピクセル値またはピクセル値を想定した数値のみで指定します。
未指定の場合は、既定で margin=10 (左右10ピクセルのマージン)が取られています。

要素間のマージンは、両隣の要素の左右を足した 10 + 10 = 20ピクセル の空きが入ります。

要素間のマージンを無くしたい場合は、margin=0 を指定します。

例 : margin=5px, margin=0 など

padding

フレックス要素の内側に余白(パディング)を取る場合にその値をピクセル値で指定します。

例 : padding=10px

width

フレックス要素の表示幅を指定する場合にそのサイズをピクセル(px)、またはパーセンテージ(%)の単位を付けて指定します。

例 : width=240px, width=25% など

height

フレックス要素の表示高を指定する場合にそのサイズをピクセル(px)または数値のみで指定します。

例 : height=320px, height=320 など

class

各フレックス要素に指定するclassがある場合にそのクラス名を指定します。

例 : class=”ft13px bg-blue”

style

各フレックス要素に指定する任意のスタイルを直接指定できます。

例 : style=”background-color:#eee;border:1px solid #ccc;”