フレックスボックス用ショートコード

このショートコードを使用するにはDigiPressテーマ専用のプラグイン(有料)が必要です

22.0〜 19.0〜 11〜 6.1〜 12.10〜 4.4〜 7.1〜

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

最もシンプルな例(パラメータなし)

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

[flexbox class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

このショートコード

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

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

[flexbox alignh=”center” class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

このショートコード

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

右寄せした例

[flexbox alignh=”right” class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

このショートコード

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

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

[flexbox alignh=”between” class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

このショートコード

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

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

※既定では要素間は20pxのマージンがあります。

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

このショートコード

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

要素間のマージンをなくして等幅表示した例

[flexbox flexchildren=1 class=”box”]
[flexitem margin=0 class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem margin=0 class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem margin=0 class=”bg-pink pd10px”]
3つ目のコンテンツ。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
[/flexitem]
[/flexbox]

このショートコード

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

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

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

このショートコード

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