0

私は CSS3 フレキシブル モデルを研究しています。それについてMDN のページをチェックアウトしました。一般的な概念は理解できたと思いますが、次のプロパティがどのように機能するかわかりません。

flex-basis : CSS の flex-basis プロパティは、フレックス アイテムの初期のメイン サイズであるフレックス ベースを指定します。

flex-grow : CSS の flex-grow プロパティは、フレックス アイテムのフレックス グロー ファクターを指定します。

flex-shrink : CSS flex-shrink プロパティは、フレックス アイテムのフレックス シュリンク ファクターを指定します。

また、MDN にリンクされているサンドボックスhttp://demo.agektmr.com/flexbox/とhttp://the-echoplex.net/flexyboxes/をいじってみましたが、まだ理解できませんでした。

それらの意味を理解するのに役立つように、これらのプロパティについて詳しく説明していただけますか?

4

1 に答える 1

1

コメントで@cimmanonが示唆しているように、w3仕様はそれをよりよく説明しています: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex :

要するに：

flex-basisは、フレックス ファクターに従って空き領域が分配される前の、フレックス アイテムの初期のメイン サイズを指定します。

flex-growは、正の空き領域の配分を制御します (コンテナのサイズがフレックス アイテムの表示に必要なサイズよりも大きい場合)。

flex-shrinkは、ネガティブスペースの分布を制御します (コンテナーの寸法がアイテムの表示に必要なサイズよりも小さい場合)。

于 2013-08-13T17:02:44.567 に答える