Godot入門：FlowContainerの使い方と活用法

はじめに
FlowContainerとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
まとめ
シリーズ：Godot 4 ノード解説

はじめに

アイテム欄にアイコンをずらっと並べたとき、画面端でうまく折り返してほしいのに、はみ出てしまった——そんな経験はありませんか？ FlowContainer はその折り返しを自動でやってくれるコンテナです。

この記事では、FlowContainer の仕組みと使いどころ、よく触るプロパティを紹介します。

FlowContainerとは？

FlowContainer は 子ノードを横（または縦）に並べ、スペースが足りなくなったら自動的に次の行（または列）に折り返すUIコンテナです。子の数が増えても、コンテナの幅に合わせて自動でレイアウトを組み直してくれます。

文字を打ち続けると行末で自動折り返しするテキストエディタをイメージしてください。FlowContainer はその動きをUIノードで再現します——アイコンやタグが増えるたびに、行末で自動的に次の行へ送られます。

継承ツリーは FlowContainer → Container → Control → CanvasItem → Node です。水平折り返しに特化した HFlowContainer と、垂直折り返しに特化した VFlowContainer という派生クラスも用意されており、用途に応じて使い分けられます。

このノードを使うべき場面

インベントリ・アイテム欄：アイテムアイコンを画面幅に合わせて自動整列させたいとき
タグ・ラベル表示：可変長のタグチップを横並びに並べ、溢れたら折り返したいとき
スキル・アビリティ一覧：アンロックされたスキルのアイコンを動的に追加・削除するUI
ショップUI：商品カードを格子状ではなくフロー形式で並べたいとき
レスポンシブなUIパネル：ウィンドウサイズが変わっても子ノードの並びが崩れないようにしたいとき

別のノードが適切な場面：

列数を固定してきれいなグリッドにしたい → GridContainer の方が向いています
縦横どちらにも折り返さず一列に並べるだけでよい → HBoxContainer / VBoxContainer で十分です

主なプロパティと機能

FlowContainer の代表的なプロパティをまとめました。

プロパティ	型	役割
`vertical`	bool	`true` にすると縦方向に並べて列が溢れたら折り返す（VFlowContainer と同等）
`alignment`	enum	各行内での子ノードの揃え方（BEGIN / CENTER / END）
`last_wrap_alignment`	enum	最終行（折り返しで余った行）の揃え方を個別に指定する
`reverse_fill`	bool	`true` にすると子ノードを末尾から詰めていく

コード例：スクリプトからアイテムアイコンを動的に追加する

@onready var flow: FlowContainer = $FlowContainer

func add_item_icon(texture: Texture2D) -> void:
    var icon := TextureRect.new()
    icon.texture = texture
    icon.custom_minimum_size = Vector2(64, 64)
    flow.add_child(icon)

アイコンを追加するたびに FlowContainer が幅を見て自動で折り返してくれます。列数や行数を自分で計算する必要はありません。

コード例：テーマで子ノード間の余白（gap）を調整する

# インスペクターの「Theme Overrides > Constants」でも設定できる
flow.add_theme_constant_override("h_separation", 8)
flow.add_theme_constant_override("v_separation", 8)

もっと使いこなす：カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

パラメータ	変えると何が起きるか
`alignment` を `CENTER` に	各行の子ノードが中央寄せになる。タグ一覧などで見栄えが良くなる
`alignment` を `END` に	各行の子ノードが右端（縦なら下端）に寄る。右揃えのレイアウトに
`last_wrap_alignment` を `BEGIN` に	最終行だけ左揃えにできる。商品一覧などで端数が右に偏るのを防げる
`reverse_fill` を `true` に	子が末尾（右下）から詰まるようになる。通知バッジや最新アイテムを右下に集めるUIに
`h_separation` / `v_separation`（Theme Override）	子ノード間の水平・垂直スペースをピクセル単位で調整できる。密度感のコントロールに
`vertical` を `true` に	並び方向が縦になり、縦に溢れたら次の列へ折り返す。縦書きメニューなどに