コンテンツにスキップ

テンプレート:Flex wrap centre/s

リンクを追加
提供: Wikisource
テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

使い方

[編集]

このテンプレートは、簡単なflex-boxレイアウトを生成し、広い画面やコンテナではコンテンツを横並びに表示し、狭い画面やコンテナでは「レスポンシブ」に折り返して表示します。

これは特に、画像を横並びに表示したいが、スマートフォンや電子書籍リーダーのような狭い画面では収まらない場合に便利です。もちろん、画像以外のコンテンツにも使用できます。

さらに、各セルにある画像は、セルの境界をはみ出して他のコンテンツに重なったり、画面外にはみ出たりしないよう、自動的にリサイズされます。

パラメーター

[編集]
  • 1, 2, 3, 4：各子セルの内容
  • スタイリング
    • align：全体のテキスト整列。任意。既定値：center。
    • max-width：全体の最大幅。これにより、ページ幅100%より前に折り返しを行えます。任意。既定値：未設定。
    • align-items：クロス軸（通常は垂直方向）でのセルの整列方法。任意のCSS値が使用可能。特に便利なのは stretch（既定値）、flex-begin、center、flex-end（それぞれ上揃え・中央揃え・下揃え）。
    • align-content：クロス軸で複数行になったときの整列動作。任意のCSS値が使用可能。
    • class, style：親コンテナに追加するCSSクラスおよびスタイル。任意。
    • child_class, child_style：すべての子セルに適用されるCSSクラスおよびスタイル。任意。
    • child_classN, child_styleN（N は 1,2,3,...）：個別の子セルに適用するCSSクラスおよびスタイル。任意。

CSS

[編集]
  • 親コンテナには _flex_wrap_centre クラスが付きます。
  • 各子セルには _flex_child クラスが付きます。

デフォルトでは、子セルの間に0.5emのマージンが付いており、画像同士が少し離れて表示されます。これを無効化するには、_no_margin クラスを子セルに付与（child_classなどで）するか、child_styleでマージンを明示的に指定してください。

分割テンプレートの使用

[編集]

{{flex wrap centre/s}} と {{flex wrap centre/e}} を使って、flex環境を開いた状態にすることも可能です。この方法では、<div> やテーブルなどのブロック要素をflexラップ内で使うことができます。

子セルに対してデフォルトのパディングを適用したい場合は、クラス _flex_child を使用してください。

child_class などの子セル用パラメーターは、この方法では手動で設定する必要があります。親用のパラメーターのみ {{flex wrap centre/s}} に渡せます。

使用例

[編集]

例：: 広いコンテナ

横幅が広いと、コンテンツは横並びで表示されます： 

{{flex wrap centre
 | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]]
Caption A
 | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]]
Caption B
}}

Caption A

Caption B

例：: 狭いコンテナ

横幅が狭いと、コンテンツは折り返されます： 

<div style="width:400px; margin:auto; border:1px solid red;">
{{flex wrap centre
 | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]]
Caption A
 | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]]
Caption B
}}
</div>

Caption A

Caption B

例：: 画像の自動スケーリング

非常に狭いコンテナでは、画像が縮小され、はみ出しを防ぎます： 

<div style="width:150px; margin:auto; border:1px solid red;">
{{flex wrap centre
 | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]]
Caption A
 | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]]
Caption B
}}
</div>

Caption A

Caption B

例：: スタイル指定

親と子にスタイルを指定する例： 

{{flex wrap centre
 | style = border: 1px double blue;
 | child_style = background-color:grey; color: #202122;
 | child_style1 = border: 1px solid red;
 | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]]
 | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]]
}}

分割テンプレートの使用例

[編集]

テンプレート・パラメーター内に配置したくない表などを使いたいときに便利です： 

{{flex wrap centre/s}}
{| class="wikitable _flex_child"
| こ || れ || は
| colspan=3 | テーブル
|}
<div class="_flex_child" style="background-color:lightgrey; color: #202122;">
これはdivブロックです。

<code>_flex child</code> クラスでパディングがつきます。
[[File:Old man's wish (circa. 1813-1820) - page 1.png|250px|center]]
</div>
{{flex wrap centre/e}}
こ れ は テーブル

これはdivブロックです。

_flex child クラスでパディングがつきます。

関連項目

[編集]
  • {{Block center}} – ページ中央に単一ブロックを配置するテンプレート
  • {{div col}} – 手動でブレークポイントを設定しなくてもよいカラム分割テンプレート
この解説は、テンプレート:Flex wrap centre/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (作成 | 複製)とテストケース (作成)で試すことができます。（解説）
このテンプレートのサブページ一覧。
「https://ja.wikisource.org/w/index.php?title=テンプレート:Flex_wrap_centre/s&oldid=228307」から取得