Flexbox には、「主軸」と「交差軸」という概念があります。一般的にブラウザでは、「主軸」は水平になります。これは、デスクトップやラップトップの画面が通常横向きになっているためだと思われます。一方、React Native では、主に縦向きになっていることが多いスマートフォン向けであるため、「主軸」は通常垂直になります。どちらが「主軸」であっても、もう 1 つは「交差軸」と呼ばれます。
Flexbox でも、主軸に影響する多くのプロパティには、交差軸に影響する異なる名前の対応するプロパティがあるようです。
と呼ばれるプロパティflex-growと、 と呼ばれる別のプロパティがありflex、これらは と他のいくつかの機能をflex-grow同時に実行できます。
不明なのは、これがflex-grow対応するプロパティの 1 つなのか、例外なのかということです。プロパティについても同様ですflex。
私が質問する理由の 1 つは、レイアウトを正しくしようとすると、要素とそのすべてのカウンター/親要素に対して を設定する必要があるとよく読むからですflex。1しかし、レイアウト内の交差軸で同じ目標を達成する必要がある場所についてはどうでしょうか。
ベストアンサー1
flex-grow（および省略形の）プロパティflexは常に主軸、 もっているいいえ対応するものを設定し、空きスペースを水平方向にどのように分配するかを設定しますフレックス行方向垂直方向にフレックス列の方向。
比較すると、例えば、このjustify-contentプロパティは主軸align-itemsには対応するものがあり、それが交差軸どちらもフレックスアイテムの配置を設定します。
しかし、ここで混乱を招く可能性があるのは、流れ方向これらは、フレックス アイテムに水平方向または垂直方向に影響を与えます。
注意：主要そして交差軸画面の幅や高さとは関係ありません。
それは、流れ方向、つまりフレックス行方向（デフォルト）では、主軸水平であり、交差軸垂直であり、フレックス列の方向、主軸垂直であり、交差軸水平です。
本当に良い記事はFlexbox の完全ガイドでは、これをさらに詳しく説明しています。