FlexboxのFlexベーシスプロパティ

フレックスベース

このflex-basisプロパティはflex-item、フレックスコンテナの主軸に沿ったサイズを定義します。にflex-direction設定されrowている場合、主軸は水平であり、flex-directionプロパティがに設定されてcolumnいる場合、主軸は垂直になります。

構文

flex-basis: auto | content |  | ;

フレックスベース:自動

flex-basis: auto要素のメインサイズを検索し、サイズを定義します。例えば、水平方向のフレックスコンテナに、auto探しますwidthheight、コンテナの軸が垂直である場合。

サイズが指定されていない場合は、autoにフォールバックしcontentます。

フレックスベース:コンテンツ

flex-basis: contentwidthまたはheightが通常で設定されていない限り、要素のコンテンツに基づいてサイズを解決しますbox-sizing

flex-basisautoまたはのどちらの場合でもcontent、メインサイズが指定されている場合は、そのサイズが優先されます。

フレックスベース:

これは、widthまたはを指定するのと同じですheightが、より柔軟です。flex-basis: 20em;要素の初期サイズをに設定し20emます。その最終的なサイズは、利用可能なスペースに基づいて、flex-grow複数およびflex-shrink複数になります。

仕様では、flex省略形のプロパティの使用が提案されています。これは、プロパティとflex-basis一緒に書くのに役立ちます。flex-growflex-shrink

これは、個々のフレックスコンテナと個々のフレックス要素の行で、にどのようにflex-basis影響するかを示していますbox-sizing

横軸に対するフレックスベースの影響

ときflex-directioncolumn、同じことがflex-basis制御するheightプロパティを。以下の例でそれを見ることができます:

垂直コンテナ内の高さを制御するフレックスベースの例

詳しくは:

次のページで、フレックスベーシスプロパティに関する追加の参照に資金を提供できます。

  • CSS仕様レベル1
  • フレックスベースのMozillaDeveloperNetworkページ

Flexboxの詳細:

  • CSSFlexboxのヒントとコツ
  • Flexbox-究極のチートシート