Flex は、W3C が提案した新しいレイアウト方式であり、レスポンシブなページレイアウトを非常に簡単に行うことができます。現時点でほぼすべてのブラウザがサポートしています。Flex は Flexible Box の略であり、"弾性布局" という意味です。以下では、Flex レイアウトの使用方法について学んでいきましょう。
- 基本概念
- flex コンテナのプロパティ
- flex アイテムのプロパティ
- 結論
基本概念#
Flex レイアウトを採用した要素は Flex コンテナと呼ばれ、すべての子要素は自動的にコンテナのメンバーになります。また、Flex アイテムとも呼ばれます。つまり、Flex レイアウトの子ビューです。以下は、デフォルトの Flex コンテナのイメージです。
上記の図のように、デフォルトの Flex コンテナには 2 つの軸があります。水平方向のメイン軸と垂直方向のクロス軸です。メイン軸とクロス軸の方向は絶対的ではなく、設定によって異なります。以下は、メイン軸とクロス軸に関連する位置のいくつかです。
- メイン軸の開始点：メイン軸の開始位置
- メイン軸の終了点：メイン軸の終了位置
- メイン軸のサイズ：個々の Flex アイテムが占めるメイン軸のスペース
- クロス軸の開始点：クロス軸の開始点
- クロス軸の終了点：クロス軸の終了点
- クロス軸のサイズ：個々の 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：交差軸上でプロジェクトをどのように配置するかを設定します。以下の値を設定できます：
- 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 Mini Program を試してみましたが、開発はそれほど難しくないと感じました。この記事の内容は、WeChat Mini Program で最も重要な内容だと思います。元々は Mini Program シリーズの学習を続ける予定でしたが、後半の内容を見ると、他のプロジェクトの開発経験があれば、コンポーネントごとに学習を検証する必要はありません。したがって、Mini Program の学習はここまでにします。最後に、私が最も重要だと思うのは、Flex レイアウトです。