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

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

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

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

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

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

1つ目のコンテンツ。

2つ目のコンテンツ。

3つ目のコンテンツ。

このショートコード

[flexbox]
[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]

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

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

1つ目のコンテンツ。

2つ目のコンテンツ。

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

このショートコード

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

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

1つ目のコンテンツ。

2つ目のコンテンツ。

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

このショートコード

[flexbox flexchildren=1]
[flexitem margin=0]
1つ目のコンテンツ。
[/flexitem]
[flexitem margin=0]
2つ目のコンテンツ。
[/flexitem]
[flexitem margin=0]
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]