Flex は W3C が提案した新しいレイアウト方式で、レスポンシブページのレイアウトを非常に簡単に実現できます。現在までにほぼすべてのブラウザがサポートしており、Flex は Flexible Box の略で、翻訳すると「弾性レイアウト」という意味です。以下で Flex レイアウトの使用について学びましょう。
- 基本概念
- flex コンテナ属性
- flex アイテム属性
- まとめ
基本概念#
Flex レイアウトを採用した要素は Flex コンテナと呼ばれ、すべての子要素は自動的にコンテナのメンバーとなり、Flex アイテムとも呼ばれます。これはその Flex レイアウトの子 View です。以下は Flex レイアウトのデフォルト設定下の示意図です：
上の図に示すように、デフォルトの Flex コンテナには 2 つの軸があります：水平の主軸 (main axis) と垂直の交差軸 (cross axis) です。主軸と交差軸の方向は絶対的なものではなく、設定によって異なる場合があります。以下は主軸と交差軸に関連するいくつかの位置です：
- 主軸起点 (main start)：主軸の開始位置
- 主軸の終点 (main end)：主軸の終了位置
- 主軸空間 (main size)：単一の Flex アイテムが占める主軸空間
- 交差軸の起点 (cross start)：交差軸の起点
- 交差軸の終点 (cross end)：交差軸の終了点
- 交差軸空間 (cross size)：単一の Flex アイテムが占める交差軸空間
flex コンテナ属性#
- flex-direction：主軸の方向を設定します。設定可能な値は以下の通りです：
- row：デフォルト値、主軸を水平方向に設定し、起点は左側
- row-reverse：主軸を水平方向に設定し、起点は右側
- column：主軸を垂直方向に設定し、起点は上側
- column-reverse：主軸を垂直方向に設定し、起点は下側
- flex-wrap：改行の方法を設定します。設定可能な値は以下の通りです：
- nowrap：デフォルト値、改行しない
- wrap：自動改行
- wrap-reverse：自動改行、第一行の上の行
-
flex-flow：flex-direction 属性と flex-wrap 属性の省略形で、デフォルト値は row nowrap です。
-
justify-content：主軸上のアイテムの整列方法を設定します。設定可能な値は以下の通りです：
- flex-start：デフォルト値、左揃え
- flex-end：右揃え
- center：中央揃え
- space-between：両端揃え
- space-around：各アイテムの両側の間隔が等しく、画面の端との間隔は他のアイテム間の間隔の半分
- space-evenly：各アイテムを均等に分布し、画面の端との間隔が他のアイテム間の間隔と等しい
- align-items：交差軸上でのアイテムの整列方法を設定します。設定可能な値は以下の通りです：デフォルト値では、指定された高さがないアイテムや auto に設定されたアイテムは、コンテナの高さ全体を占めます。設定可能な値は以下の通りです：
- stretch：デフォルト値、指定された高さがないアイテムや auto に設定されたアイテムは、コンテナの高さ全体を占めます。下の図のアイテム 1 は高さを指定しておらず、他のアイテムは高さを指定しています。
- flex-start：交差軸の起点に揃える
- flex-end：交差軸の終点に揃える
- center：交差軸の中心に揃える
- baseline：アイテムとアイテムの中の最初の行の文字の基線を揃える
- align-content：複数の軸線の整列方法を設定します。1 つの軸しかない場合、この属性は無効です。設定可能な属性は以下の通りです：
- stretch：デフォルト値、軸線が交差軸全体を占める
- flex-start：交差軸の起点に揃える
- flex-end：交差軸の終点に揃える
- center：交差軸の中点に揃える
- space-between：交差軸の両端に揃え、軸線間の間隔を均等に分布
- space-around：各軸線の両側の間隔が等しく、軸線と軸線の間隔は軸線から交差軸の端までの間隔の 2 倍
flex アイテム属性#
- order：デフォルト値は 0 で、アイテムの配置順序を設定します。数値が小さいほど前に配置されます。以下の図に示します：
- flex-grow：アイテムの拡大比率を設定します。デフォルト値は 0 で、残りの空間があっても拡大しません。以下の図に示します：
- flex-shrink：アイテムの縮小比率を設定します。デフォルト値は 1 で、アイテムの空間が不足している場合、アイテムは縮小します。以下の図に示します：
上の図に示すように、flex-shrink がすべて 0 に設定されている場合、各アイテムはスケールしないため、4 つ目のボックスが押し出されます。対応する設定で flex-shrink を 1 にすると、空間が不足している場合に一定の程度でスケールできます。
- flex-basis：アイテムが占める主軸空間です。以下の図に示します：
- align-self：要素自身の整列方法を定義します。この属性は align-items 属性とほぼ同じで、具体的には一つ一つ紹介しません。直接効果図を以下に示します：
上の効果では、auto を設定すると、flex コンテナ内の align-items の設定に従います。
- flex：flex は flex-grow、flex-shrink、flex-basis の省略形で、デフォルト値は 0 1 auto です。ここでは効果図を貼りません。
まとめ#
最近、WeChat ミニプログラムを試してみましたが、開発の難易度はそれほど高くないと感じました。本記事の内容は WeChat ミニプログラムの中で最も重要な内容だと思います。本来はミニプログラムシリーズの学習を続けるつもりでしたが、後の内容はミニプログラムの各コンポーネントの使用に過ぎないことがわかりました。他のプロジェクトの開発経験があれば、1 つのコンポーネントを検証して学ぶ必要はありませんので、ミニプログラムの学習はここで終了します。最後に、WeChat ミニプログラムで最も重要なのは Flex レイアウトだと思います。