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

このショートコードを使用するには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]
>ゆりかごから墓場まで 創業以来230年

ゆりかごから墓場まで 創業以来230年

創業230年の歴史と、常に”もっと上”を追求する経営    最新鋭の3DCG提案に、構造・断熱の細かな全棟計算。 戸建・アパート・グループホーム等の新築・リフォームに留まらず、寺院の宮大工工事、遊戯施設の大型空調設備の計算・施工、美容室・飲食店の設計施工、果ては食品工場の新築・改修まですべての知識を持って、要求に応えます。 ”どこに聞いたらわからない”個人のお客様  ”すべて任せられる・応えられる人に相談にのってほしい”の法人のお客様 ぜひ一度問い合わせください。

CTR IMG