CSS3におけるフレックス値1は何を意味しますか

は、「flex-grow」項目の拡大率の値が 1、「flex-shrink」項目の縮小率の値が 1、「flex-basis」項目の占有スペースが「0%」であることを意味します。 ; flex は「flex-grow、flex-shrink、flex-basis」の 3 つの属性値の略称です。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 の flex 値 1 は何を意味しますか?

flex は、実際には、flex-grow、flex-shrink、および flex-basis の 3 つの属性値の組み合わせの略語です。同等の条件は次のとおりです。

構文:

auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

定義:

• flex-grow: 項目の拡大率を定義します。デフォルトです。が0、つまりスペースが残っている場合は拡大されません。

• flex-shrink: アイテムの縮小率を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、アイテムは縮小します。

• flex-basis: 余分なスペースを割り当てる前に、項目が占めるスペースを定義します。ブラウザはこの属性を使用して、主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。値が 0 の場合、スケーラブルと見なされないようにユニットを追加する必要があります。

flex プロパティは、flex-grow、flex-shrink、flex-basis の略称で、デフォルト値は 0 1 auto です。最後の 2 つのプロパティはオプションです。

詳細な紹介:

Flex-grow

flex-grow 属性は項目の拡大率を定義します。デフォルトは 0 です。 、残りのスペースがある場合、Nor Grow

すべての項目の flex-grow プロパティが 1 の場合、残りのスペース (存在する場合) を均等に分割します。 1 つの項目の flex-grow プロパティが 2 で、他の項目がすべて 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。

フレックスシュリンク

フレックスシュリンクプロパティはアイテムの収縮率を定義します。デフォルトは1です。つまり、スペースが不十分な場合、アイテムは縮小されます。縮みます。 flex-shrink 属性は項目の収縮率を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、項目は縮小します。

すべての項目のフレックスシュリンク プロパティが 1 の場合、スペースが不足すると、すべての項目が比例して縮小されます。 1 つの項目の flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不十分な場合、前者は縮小されません。

フレックス ベース

フレックス ベース プロパティは、余分なスペースを割り当てる前に項目の主なサイズを定義します。ブラウザはこの属性を使用して、主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。

幅または高さの属性と同じ値 (350px など) に設定すると、項目は固定スペースを占有します。

.item {
flex: 1;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

.item {
flex: auto;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

.item {
flex: none;
}
/* 等同 */
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

.item {
flex: 1 2;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3におけるフレックス値1は何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。