フレックスレイアウトとは何か(6)フレックスコンテナの設定②

フレックスアイテムの位置

さて、ここが一番ややこしいところです。パネル内の赤枠で囲んだ部分は連動しています。そのため、単純に「これはこう」とは言えないんですよね。

ですからいくつかに分けて説明します。

フレックス始点、中央、フレックス終点

これはテキストの配置で表現すると、「行頭揃え」「中央揃え」「行末揃え」となります。フレックスアイテムの並び順が「行」(左から右)、「行 (逆順)」(右から左)、「列」(上から下)、「列 (逆順)」(下から上)と4種類あるので、単純に「左揃え」などとは言えないのがややこしさを増大させています。

上の図の状態で「←」(つまり「行 (逆順)」(右から左))をクリックするとこうなります。赤丸で囲んだところがクリックしたアイコン、青の四角で囲んだところが連動して変更された部分ですね。

並び順を「行」から「行 (逆順)」に変更したんだから右揃えになるんじゃないかと予想されるんですが、その期待は裏切られます。並び順は意図通り変更されるんですが。右揃えにしたい場合は、この状態からさらに「9点の図の左上」もしくは「フレックス始点」をクリックしなければなりません。

それでやっと直感と同じ配置になります。

フレックスレイアウトは一度設定してしまえば変更することはまずないので、頻繁に行うことではありません。そのため毎回試行錯誤することになります。この記事を書くために色々設定変更して試している私ですら慣れないので、まだほとんど触ったことのない人にとっては苦痛だと思います。「設定さえすればあとは勝手に動いてくれるんだよ~今だけの辛抱!」と思ってください。

これ以上説明しても、似たようなことを例示するだけなので先に進みます。

等間隔(両端、周囲、すべて)

これらはテキストの配置で表現すると、「両端揃え(頭末揃え)」となります。右寄せ、左寄せというのがないので、「9点の図」が3点に変わります(図の青い枠で囲った部分)。なお、ここからは分かりやすくするため、フレックスコンテナの内側の余白(パディング)に薄い緑色を敷いています。

テキストだと「等間隔 (両端)」しかないのですが、フレックスレイアウト(本CSS Flexboxも)では間隔の開け方が3種類あります。(次の図では説明の都合上、上下位置を中央にしています)

ここは本CSS Flexboxに倣ったのでしょうが、そこまで必要だったのかなという印象です。


以上でフレックスレイアウトの説明は終わりです。CSS Flexboxをまねているけれど細かいところはちょっと違いますね。

Webはデバイスによって画面幅が違うので、どの画面幅にも対応できるようデザインするというのはかなり重要なのですが、InDesignは基本的に紙ですから(リフローePubというのもありますが)なかなか可変サイズ機能を使うという発想にはならないと思います。

前の回で「中カッコ」という、よくある例を見つけたのは非常によかったのですが、もう少しサンプル欲しいですよね。そういうわけで、もういくつかサンプル(9スライスできました)を入れてこの連載を終わりたいと思います。最終目標はAdobe XDのユーザーガイドのレスポンシブサイズ変更にある最初の例InDesignで作ることです。どこまでできるかな?