フレックスボックスでのボックス配置
ボックス配置の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。
基本的な例
この例では、3 つのフレックスアイテムが justify-content を使用して主軸に、 align-items を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された align-items の値を上書きし、 align-self で center に設定しています。
軸と flex-direction
フレックスボックスは文書の書字方向を尊重しますので、英語の場合で justify-content が flex-end に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 flex-direction が row に設定されていた場合、この配置はインライン方向になります。
しかし、フレックスボックスでは flex-direction を column に設定することで、主軸を変更することができます。この場合、 justify-content はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差軸について次のように考えると最も簡単です。
- 主軸 =
flex-directionで設定された向き =justify-contentで配置 - 交差軸 = 主軸と交差 =
align-content,align-self/align-itemsで配置
主軸の配置
交差軸の配置
フレックスボックスには justify-self はない
主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。justify-content プロパティは、どのように残りの領域を使用するかを制御します。justify-content: flex-end に設定すると、余分な領域はアイテムの前に配置され、justify-content: space-around に設定すると、その大きさアイテムの両側に配置される、などです。
つまり、常にアイテムのグループ全体が動き回るよう配分されるため、justify-self プロパティはフレックスボックスでは意味を持ちません。
交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 align-self は意味を持ちます。
alignment および auto のマージン
justify-self プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに auto を使用することができます。 auto に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを auto に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。
開始点に配置された一連のフレックスアイテムのうち、1 つのアイテムで margin を auto に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、空間に収まるように縮小します。
gap プロパティ
アイテム間における固定幅の間隔の作成
主軸では、column-gap プロパティは兄弟アイテムの間に固定幅の間隔を作成します。
交差軸では、row-gap プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには flex-wrap を wrap に設定する必要があります。