フレックスレイアウトとは何か（1）基本的な挙動

2025年10月28日

---

フレックスレイアウトの要素

フレックスレイアウトは次の2つの要素からなっています。

• 親要素：フレックスコンテナ（flex container）
• 子要素：フレックスアイテム（flex item）

ただし「フレックスコンテナ」「フレックスアイテム」という名称はCSS Flexboxでの名称で、InDesignでこの名称を使用している箇所はありません。InDesignでは親要素は「フレックスレイアウト」という名称ですが、親子まとめて扱うときも「フレックスレイアウト」と言っているので混同しやすいです。子要素は「フレックスレイアウトの子」と書かれているところがあります。スクリプトでは親要素はFlexObjectですので、そのまま「フレックスオブジェクト」で良かったのではないかと思います。

他にもCSS Flexboxと名称が異なるところがあり、プレリリースに持っていって検討しようかと思ったのですが、良い名称が見つからなかったために断念しました。このブログでは名称変更が行われるまで「フレックスコンテナ」「フレックスアイテム」で説明します。

フレックスコンテナ

基本的な操作は長方形と同じです。右下のフレックスコンテナを示すアイコンで区別できます。塗りと線も指定できますし、角の形状も指定できます。長方形と大きく違うのは、属性（グラフィック、テキスト、割り当てなし）が指定できません。「フレックスレイアウト」という属性になっているとも言えますが、他の属性に変更することはできません。

フレックスアイテム

フレックスコンテナの中に入るオブジェクトです。図形や画像フレーム、テキストフレーム、グループなどがフレックスアイテムになります。フレックスアイテムは複数入ります（1つでもよいです）。上限の数は調べてません。

フレックスアイテムには並び方を指定するため、順番が振られます。レイヤーパネルでは下の方から1番、2番、となります。この順番はオブジェクトのドラッグ＆ドロップで入れ替えられますし、レイヤーパネルでも入れ替えられます。

---

フレックスレイアウトの挙動

フレックス（柔軟）というからには何かしらの可変的な挙動があります。

フレックスコンテナの大きさ（幅と高さ）が自動

フレックスコンテナの幅や高さを「自動」にすると、フレックスコンテナの大きさはフレックスアイテムの大きさの変更に合わせて変わります。これにより、フレックスアイテムの大きさが変更されてもフレックスアイテム同士の間隔が維持されます。この機能はCSS Flexboxにはありません。InDesign特有の機能になります。

今までは変更があると、整列パネルの［等間隔に分布］で位置を調整する必要がありましたが、それがなくなります。ただし、フレックスコンテナの位置の基準点は左上固定なので、全体を中央揃えにしていて、それを維持したい場合はそれほど効率が良くなるわけではありません。これは要望事項ですね。

フレックスアイテムの位置の入れ替えが簡単（座標が自動）

フレックスアイテムの位置（順番）を入れ替えたい場合、一つのアイテムをドラッグして別のアイテムに重ねると、移動先が表示され、そのままドロップすると入れ替わります。今まで表の行や列なんかはドラッグ＆ドロップで入れ替えることができましたが、オブジェクトを入れ替えるということはできませんでした。

これを従来の手順でやろうとすると次のようになります。（簡単な図形でしかテストしていないので、もし座標がずれたらごめんなさい）

1. 入れ替えたい2つのオブジェクトを選択
2. ［オブジェクト］→［変形］→［180°回転］
3. ［オブジェクト］→［変形を再実行］→［変形を個別に再実行］

フレックスアイテムの位置（間隔）が自動

フレックスコンテナの大きさが変更された場合、各フレックスアイテムの位置（間隔）を自動で変更できます。

これも従来は整列パネルのお世話にならないといけなかったものです。ただし、両端位置を決めて間隔を調整することはできないですから（必ず間隔を計算して指定しなければならない）そのようなケースでは大幅に楽になるでしょう。

フレックスアイテムの大きさが自動

フレックスコンテナの大きさの変更に合わせて、フレックスアイテムの大きさを自動的に変更することができます。ただし、これには条件があります。

• フレックスアイテムの間隔は常に0である
• 自動的に大きさを変更したいフレックスアイテムは、すべて同じ大きさになる

つまり図のようなことです。

これではあんまりですね。そこで、大きさを固定したいフレックスアイテムと、自動的に変更したいフレックスアイテムを指定することができます。両端の図形を固定しテキストフレームだけ自動にするとこうなります。

逆にテキストフレームを固定して両端の図形を自動にします。

---

使用例

挙動をおおむね把握したところで、では実際にどのような場面で使えるか、という例を出します。

次のようなローカル鉄道ガイド本があったとします。

で、これに次のような赤字が入りました。まあ、当然ですね。

こういうときにフレックスレイアウトで作成しておくと都合はよいのです。この路線図のフレックスレイアウトは2種類のテキストフレームからできています。

こうすることで、駅名の大きさは固定、駅間の線はフレックスコンテナの大きさに合わせて伸びたり縮んだりします。しかも「自動的に大きさを変更したいフレックスアイテムは、すべて同じ大きさになる」仕様なので特定の駅間だけが伸びるということはなくて、すべての駅間が勝手に同じ大きさになってくれます。

ということでうまい具合になってくれました。

他にもメリットがあります。フレックスアイテムを1つだけ選択して、コピー＆ペーストすると、選択したフレックスアイテムの直後に複製されます。

駅間の方もコピー＆ペーストで複製し、レイヤーパネルで入れ替えます（ドラッグ＆ドロップでも可能ですが思った位置に移動できないことがあります）。

このように駅が1つ増えました。つまり、フレックスレイアウトを使うことにより将来的に駅が新設されたり廃止されたとしても柔軟に対応できます。直しに非常に強いというのが最大のメリットになります。

フレックスコンテナの大きさの変更に応じてフレックスアイテムの高さが変更する様子をご覧ください。

ここまでは説明のために架空の本のレイアウトでした。「実際のところそんなにうまい例はないんじゃないの？」と思われるかもしれません。そこで実際に使える例を探しましたらPIXTAに写真がありましたよ。

東京メトロ丸ノ内線霞ヶ関駅ホームの「停車駅案内図」です。参考にした写真が粗いので（買ってないから）実際のものとは異なりますがおおむねこんな感じです。

基本的にはテキストフレーム（幅が可変）を11個並べたものです。1つのテキストフレームはこういう作りです。

接続路線（乗り換え）はアンカー付きオブジェクトです。駅名の行の最初にアンカーマーカーがあります。

で、このアンカー付きオブジェクトがフレックスコンテナになっています。この中のフレックスアイテムは円形のテキストフレームですね。それにアンカー付きオブジェクトがくっついていて、そこに路線名が入っているという。おおよそ常人では作らない構造になっています。これを作れたら超上級者を名乗っていいですよ、ぐらい。

フレックスレイアウトではアンカー付きオブジェクト（テキストフレームより右にはみ出しています）は無視されて、本体のテキストフレームだけで計算します（アンカー付きオブジェクトも含めたらテキストフレームの間に空白が出るはず）。

また、フレックスコンテナは、コンテナからはみ出している部分をクリップします（右端の池袋のアンカー付きオブジェクトを見てください）。

ここで「茗荷谷」のテキストフレームをコピーし、選択されたままの状態で3回ペーストしました。

このように駅が3つ増え、テキストフレームの幅が狭くなっていることが分かります。これで駅が新設・廃止されても修正が楽ですね！　東京メトロさんお仕事依頼待ってます（笑）　アンカー付きオブジェクトがクリップされるので池袋の接続路線名が切れちゃってますが内緒です。

なお、増えた茗荷谷駅の番号が26、27、28になっていますが、実はこの部分は数字を直接入力しているわけではなくて、後注参照マーカーです。ペーストするたびに番号が1増えるというトリッキーな技で、どこに追加されたか確認したい場合に使用すると便利です。

---

以上、基本的な挙動と使用例を説明しました。フレックスレイアウトにはここでは説明していない挙動もありますので、次に続きます。