このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です。
任意の複数コンテンツを横または縦に並べたフレックスボックスを表示できます。
パラメータ動作チェック
INDEX
最もシンプルな表示例
※視認性のためサンプルは背景カラーを付けています。
このショートコード
[flexbox class="box"] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
水平方向に中央寄せした例
このショートコード
[flexbox alignh="center"] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
右寄せした例
このショートコード
[flexbox alignh="right"] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
表示幅いっぱいに等間隔に並べた例
このショートコード
[flexbox alignh="between"] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
表示幅に合わせて自動で等幅表示した例
このショートコード
[flexbox flexchildren=1] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。 [/flexitem] [/flexbox]
要素間の間隔を指定した例(5px)
要素間の間隔の既定値は 20ピクセルです。
このショートコード
[flexbox gap=5 flexchildren=1] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
3番目の要素を他の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=12つ目のコンテンツ。 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;”