フレックスレイアウトとは何か(4)フレックスコンテナの設定①
ここからはフレックスレイアウトのメイン要素であるフレックスコンテナの設定を説明します。長くなりそうなので2~3回になると思います。なおこの先は特に記載がなければフレックスアイテムの大きさは「固定」です。
余白(パディング)と間隔
普通説明というと、上から順にしていくのが自然なのですが「フレックス」パネルの場合、上にある要素がややこしくて下にある方が簡単なので、下から説明します。
まず余白(パディング)と間隔ですが図の通り。普段グラフィックデザインにかかわっている人であればこれ以上の細かい説明は不要でしょう。
並び順
並び順はCSS Flexboxのflex-directionプロパティに相当します。ですのでツールチップもそれに対応した表記になっています。
| アイコン | ツールチップ | CSSプロパティ |
|---|---|---|
| → | 行 | flex-direction: row; |
| ← | 行 (逆順) | flex-direction: row-reverse; |
| ↓ | 列 | flex-direction: column; |
| ↑ | 列 (逆順) | flex-direction: column-reverse; |
コンテンツの折り返し
コンテンツの折り返しはCSS Flexboxではflex-wrapプロパティになります。これをオンにするとフレックスアイテムが折り返されます。
コンテンツの折り返しをオフにするとフレックスアイテムが折り返されず、フレックスコンテナの外側に延びていきます。フレックスコンテナはクリッピングマスクになっているので、外側の部分は表示されません(フレックスコンテナの大きさが固定の場合)。
ここで、CSS Flexboxに熟知している人だと「逆方向の折り返しは?」と気になるでしょう。というのもflex-wrapプロパティは次の値を持つからです(解説はmdnより)。
| nowrap | フレックスアイテムは単一行に配置され、フレックスコンテナーからはみ出すこともあります。交差軸の先頭は、flex-directionの値に応じて、インラインの先頭またはブロックの先頭のどちらかと等しくなります。 |
| wrap | フレックスアイテムは複数行に分割されます。交差軸の先頭は、現在の書字方向およびflex-directionの値に応じて、インラインの先頭またはブロックの先頭のどちらかと等しくなります。 |
| wrap-reverse | wrapと同様に動作しますが、交差軸の先頭と末尾が入れ替わります。 |
InDesignでは「折り返す(wrap)」「折り返さない(nowrap)」の2つしかないように見えます。
と・こ・ろ・が、スクリプトでは「逆方向の折り返し(wrap-reverse)」があるんです。フレックスコンテナを選択した状態で
app.selection[0].flexWrap = FlexWrap.WRAP_REVERSE;
を実行すると逆方向に折り返されます。
(開始位置が変更されていないことに注意してください)
この挙動は、意図されたものかそうでないかが不明です。「InDesign 21.0と21.1のスクリプト面での変更点」でも少し言及しましたが、「初期段階では実装予定だったのが途中で仕様変更となり、UIでは削除されたもののスクリプトは削除されずに残った」という可能性があります。逆に「UIの不備で、今後実装される」かもしれませんが。いずれにせよ、まだできたばかりの機能ですのでバグが潜んでいる可能性は十分にあります。
最後に、この連載の第1回で例として挙げた路線図を、折り返し仕様にするとどうなるかを見て、使用方法のヒントにしてもらえばと思います。




