👨🏼‍🎓 👩🏾‍💼 👩🏼‍🎤 CSSフレックスプロパティの調査 🧖🏿 🕵🏾 👨‍👨‍👦

CSSの短縮プロパティがどのように機能するのか疑問に思ったことはありflexませんか？それはあなたがプロパティ値を設定することができますflex-grow、flex-shrinkとflex-basis。このプロパティはビューflex: 1で最も頻繁に使用されることに気付きました。これにより、フレックスアイテムを伸ばして使用可能なスペースを占有できます。この記事では、省略形のプロパティとそれを使用して設定されるプロパティについて説明します。これらのプロパティをいつ、なぜ使用できるのかについて説明し、実際的な例を示します。

flex

フレックスグロープロパティ

CSSプロパティはflex-grow、フレックスグローファクターと呼ばれるものを調整するために使用されます。これにより、これらの要素をストレッチして使用可能なスペースを埋めることができます。このプロパティの値として使用できるのは整数のみです。例を見てみましょう。

HTMLマークアップは次のとおりです。

<div class="wrapper">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

スタイルは次のとおりです。

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
}

プロパティflex-growは、プロパティの値に応じて、要素の幅または高さに影響を与える可能性がありますflex-direction。次の例を検討するときは、使用するプロパティflex-directionがデフォルト値（row）に設定されていることに注意してください。そうでない場合は、それについてお話しします。

使用しない場合flex-grow、フレックスアイテムは元の幅と同じデフォルトの幅に設定されることに注意してください。また、使用する場合flex-grow: 1、使用可能な空き領域は要素間で分散されます。

上記では、flex-growプロパティは適用されません。以下はflex-growです：1

フレックスアイテム間にどのように正確に空き領域が割り当てられているのか疑問に思われるかもしれません。これは良い質問です。すぐにお答えします。

次の図は、プロパティを使用しない場合の要素の外観を示していますflex-grow。つまり、アイテムは通常のサイズでここに表示されます。

flex-growプロパティは使用されません

フレックスアイテムの幅がどのように計算されるかを理解するには、以下の式を見てください。私はこれらの公式をサマンサミンの資料で見つけました（私は彼女に感謝します！）。

最初の要素（テキストを含む要素）の幅を計算してみましょうCSS。

要素の幅を見つける

したがって、ここでは次の式が使用されます。

  = ((flex-grow  /   flex-grow) *  ) +

この式を分析してみましょう：

flex-grow アイテムに指定されている成長係数です。
flex-grow すべての要素の成長係数の値の合計です。
-これは、メカニズムを使用する前のコンテナの空き領域ですflex-grow。
-これは、ご想像のとおり、で変更する前の要素の幅ですflex-grow。

この式に実際の値を代入すると、次のようになります：

  = ( (1 / 3) * 498) + 77 = 241

アイテムごとに異なるフレックスグロー値

前の例では、すべてのフレックスアイテムに同じ値が使用されましたflex-grow。それでは、最初の要素にプロパティを割り当ててみましょうflex-grow: 2。要素の幅はどのように計算されますか？次の式を検討するときは、この例の空き領域の幅はであることに注意してください498px。

異なる要素のフレックスグローが異なる状況での要素の幅の検出

ご覧のとおり、これは、上記で説明した要素の幅を計算するために同じメカニズムを使用します。主な違いはflex-grow、最初の要素の値がとして設定され2ていることです。これは、要素の幅を計算するための式に反映されています。

0をflex-grow値として使用できますか？

もちろんできます！プロパティflex-growは整数値を受け入れるため、に書き込むことができます0。これは、フレックスアイテムのサイズを変更してコンテナの空き領域の一部を占有したくないことを意味します。

Flex-Growプロパティを0に設定した結果

ご覧のとおり、プロパティが割り当てられflex-grow: 0ている要素の幅は変わりません。この手法は、フレックスアイテムを元の幅に維持する場合に役立ちます。

Flex-growはアイテムを同じにしません

使用法flex-growにより、一致する要素の幅を同じにすることができるという一般的な誤解があります。これは間違いです。使用のポイントはflex-grow、要素間で使用可能なスペースを分散することです。上記の式を分析するとわかるように、フレックスアイテムの最終的な幅は、元の幅（つまり、適用される前の幅）に基づいて計算されflex-growます。

セットのすべての要素の幅を同じにする必要がある場合は、プロパティを使用してこれを実行できることを知っておいてくださいflex-basis。これについては以下で説明します。

フレックスシュリンクプロパティ

このプロパティをflex-shrink使用すると、いわゆるフレックスシュリンクファクターを設定できます。すべてのフレックスアイテムがコンテナのサイズよりも大きい場合、アイテムは割り当てられたプロパティ値に従って縮小されますflex-shrink。

flex-shrinkプロパティが中央のアイテムに割り当てられます。1

この例のスタイルは次のとおりです。

.item-2 {
    width: 300px;
    flex-shrink: 1;
}

次の条件が満たされると、ブラウザは要素の幅をitem-2等しく300pxします。

すべての要素の合計幅は、コンテナの幅よりも小さくなっています。
ページビューポートの幅は、要素の幅以上です。

前の例の要素が、さまざまな幅のビューポートに表示されたときの動作を次に示します。

画面上に表示するのに十分なスペースがある限り、「Is」というテキストの要素の幅は

縮小されません。ご覧のとおり、要素は縮小されず、300px十分なスペースがある限りその幅が維持されます。

フレックスベースのプロパティ

プロパティflex-basisは、flex-growおよびプロパティによって設定された柔軟性係数に従って空き領域が割り当てられる前に持つフレックスアイテムの基本サイズを設定しますflex-shrink。デフォルトでは、以外のすべての値のためにautoとcontent、値がflex-basis要素の幅に等しく、およびプロパティを使用している場合flex-direction: column、その高さを。

プロパティflex-basisは、widthおよびプロパティが取ることができるのと同じ値を受け入れますheight。デフォルト値はauto、値に基づいて設定された値contentです。値contentは、フレックスアイテムのコンテンツのサイズに基づいて自動的に設定されます。この例の

要素にitem-1次のスタイルを適用してみましょう。

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

flex-basisプロパティの使用法：50％

ここでは、最初のアイテムにプロパティが割り当てられていますflex-basis: 50%。この場合、それを0プロパティにリセットすることが重要flex-growです。これにより、要素のサイズがを超えないようにすることができます50%。

代わりにプロパティにflex-basis値を書き込むとどうなります100%か？これにより、要素は親要素の幅の100％を占め、他の要素は新しい行に折り返されます。

関連するスタイルは次のとおりです。

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
}

flex-basisプロパティを使用した結果は100％です。

短縮フレックスプロパティ

プロパティは、flex集合プロパティ値に、簡略形式で、可能flex-grow、flex-shrinkおよびflex-basis。このプロパティが取るデフォルトはですauto。一致しflex: 0 1 autoます。これは、フレックスアイテムがコンテンツのサイズに基づいてサイズを拡大できることを意味します。

これに関連して、1つの重要な詳細に注意を向けたいと思います。絶対サイズと相対サイズのフレックスアイテムについて話します。ちなみに、これはCSSの配置とは何の関係もありません。これはフレックスボックスモデルに適用されます。

相対サイズのフレックスアイテム

CSSは次のとおりです。

.item {
    /* ,   ,  flex: 1 1 auto */
    flex: auto;
}

ここでは、フレックスアイテムのサイズはコンテンツに基づいています。その結果、コンテンツの多いアイテムは大きく表示されます。

より多くのコンテンツを持つ要素はより多くを持ちます

絶対寸法のフレックスアイテム

前の例とは異なり、プロパティflex-basisが値0に設定されている場合、これによりすべてのフレックスアイテムが同じサイズに拡大します。

スタイルは次のとおりです。

.item {
    /*  flex: 1 1 0% */
    flex: 1;
}

アイテムは同じサイズです

私が大好きなフレックスプロパティ機能

プロパティの名前flexそのものが、渡された値で柔軟に機能できることを示唆しています。これにより、私にとって魅力的な機能がいくつか得られます。いくつかの例を見てみましょう。

▍単位なしの単一値

CSSは次のとおりです。

.item {
    flex: 1;
}

ここでは、flex単位のない単一の値がプロパティに書き込まれます。この値は、システムによってプロパティの値として解釈されますflex-grow。同等のものはのようになりますflex: 1 1 0。

▍単位なしの2つの値

次のスタイルを見てみましょう。

.item {
    flex: 1 1;
}

ここでは、値flex-growとをそれぞれ明示的に設定しますflex-shrink。これflex-basisはデフォルトにリセットされます。

▍特定のサイズを表す単一の値

次のスタイルがどのように「デコード」されるかについて話しましょう。

.item {
    flex: 100px;
    /* flex: 1 1 100px */
}

値100pxは、システムによって値として扱われますflex-basis。とにflex-growしてflex-shrink、デフォルトでは、書き込まれます1。

▍単位を指定せずに0を使用する

プロパティを使用flex-basisして値0を設定するとしますflex。この問題を解決するために、これを行うことにします。

.item {
    flex: 0;
}

そのようなコードを読む人とブラウザの両方を混乱させる可能性があるため、そうすることはお勧めしません。理解する方法-これは正確には何を指し0ますか？プロパティにflex-grow、flex-shrinkまたはflex-basis？一般的に、混乱が判明します。ここでは何CSSの仕様はそれについて言う：A

測定の単位なしのゼロは、その前に2つの細長値なし、細長値として解釈されるべきです。誤解や誤解を招くプロパティ宣言を回避するために、作成者は、flex-basisをゼロに指定するときに単位を使用するか、この値の前に2つのflex-basis値を付ける必要があります。

つまり、あいまいさを避けるために、上記のコードは次のように書き直す必要があります。

.item {
    flex: 0%;
    /* flex: 1 1 0% */
}

ここ0%では構造が使用されていますが、たとえば、構造を使用できます0px。

短縮フレックスプロパティを使用する

あなたがプロパティを設定する必要がある場合flex-grow、flex-shrinkおよびflex-basis、そのための速記プロパティを使用するのが最適ですflex。CSS仕様を

見てください：ショートハンドプロパティを適用すると、未指定の値が一般的な用途に対応する状態に正しくリセットされるため、完全修飾プロパティ名を直接使用するのではなく、フレックスショートハンドプロパティを使用してフレックスアイテムを管理することをお勧めします。

使用例と実際の例

▍ユーザーアバター

flexプロパティで構成されたアバター

flexboxモデルは、ユーザー関連のページコンポーネントのスタイルを設定するためによく使用されます。たとえば、これはユーザーのアバターと対応する署名に関係します。これらは同じ行にある必要があります。

マークアップは次のとおりです。

<div class="user">
    <img class="user__avatar" src="shadeed.jpg" alt="" />
    <div>
        <h3>Ahmad Shadeed</h3>
        <p>Author of Debugging CSS</p>
    </div>
</div>

スタイルは次のとおりです。

.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

要素を設定するときにuser__avatar、プロパティを適用したことに注意してくださいflex: 0 0 70px。この設定がないと、一部の古いブラウザでは画像が正しく表示されない可能性があるため、これは重要です。さらに、プロパティflexの優先度は、プロパティwidth（適用される状況の場合flex-direction: row）およびプロパティheight（適用される状況の場合）の優先度よりも高くなりflex-direction: columnます。

プロパティのみに影響するアバターのサイズを変更するflexと、ブラウザはプロパティに設定されている内容を無視しますwidth。関連するスタイルは次のとおりです。

.user__avatar {
    /*   100px,   70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}

▍要素タイトル

要素のタイトル要素のタイトルの

スタイルを設定する必要があるとします。この見出しは、使用可能なすべてのスペースを占める必要があります。プロパティを使用してこの問題を解決できますflex: 1：

.page-header {
    display: flex;
    flex-wrap: wrap;
}

.page-header__title {
    flex: 1;
}

▍メッセージを準備するための入力フィールド

このような入力ボックスフィールドは、FacebookやTwitterなどのメッセージングアプリケーションでよく見られます。このようなフィールドは、使用可能なすべてのスペースを占める必要があります。この場合、メッセージを送信するためのボタンの幅は固定されている必要があります。これはCSSでどのように見えるかです：

form {
    display: flex;
    flex-wrap: wrap;
}

input {
    flex: 1;
    /*   */
}

この例は、プロパティの使用法の良いデモンストレーションですflex-grow。

プロパティを使用するいくつかの方法は、flexこのプロパティに捧げられた出版物では十分な注意が払われていないことに注意する必要があります。これを修正しましょう。

▍異なるカードにある下部の要素を揃えます

目標は、両方の日付を赤い線に揃えることです

。2列のCSSグリッドレイアウトがあるとします。ここでの問題は、カードのテキストコンテンツの最後に表示される日付が整列していないことです。そして、前の図に示したのと同じ線上にある必要があります。

フレックスボックスモデルを使用して、この問題を解決できます。

マークアップは次のとおりです。

<div class="card">
    <img src="thumb.jpg" alt="">
    <h3 class="card__title">Title short</h3>
    <time class="card__date"></time>
</div>

プロパティを使用して、目標を達成できますflex-direction: column。要素card__titleである見出しは、プロパティflex-growを適用し、使用可能なすべてのスペースを占めるようにすることでスタイルを設定できます。その結果、カードの下部に日付行が表示されることがわかりました。これは、タイトル自体が十分に短い場合でも発生します。

スタイルは次のとおりです。

.card {
    display: flex;
    flex-direction: column;
}

/*   */
.card__title {
    flex-grow: 1;
}

この問題は、プロパティに頼ることなく解決できますflex-grow。つまり、フレックスボックスモデルと、キーワードを使用してマージンを自動的に設定するメカニズムの使用について説明していautoます。ちなみに、これについては詳しい記事を書きました。

/*   */
.card__date {
    margin-top: auto;
}

細長係数に異なる値を使用する

このセクションでは、プロパティの使用について説明したいと思います。プロパティにはflex-grow、flex-shrink以外の値が割り当てられています1。次に、これらのプロパティを設定するために同様のスキームを使用するいくつかの実用的な例を示します。

▍コントロールパネル

コントロールのセット

この例では、Facebookのデザインに触発されました（そこからアイコンも取得しました）。コントロールパネル（actions次のコードの項目）には4つの項目があります。最後の（要素actions__item.user）の幅は、他の要素の幅よりも小さくなっています。次のようなコントロールパネルを作成できます。

.actions {
    display: flex;
    flex-wrap: wrap;
}

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}

▍要素が引き伸ばされたアニメーション

要素に

カーソルを合わせると伸びます。Flexアイテムにカーソルを合わせるとアニメーション化できます。この手法は非常に便利です。関連するCSSは次のとおりです。

.palette {
    display: flex;
    flex-wrap: wrap;
}

.palette__item {
    flex: 1;
    transition: flex 0.3s ease-out;
}

.palette__item:hover {
    flex: 4;
}

ここでは、すべての動作を示すビデオを見つけることができます。

▍アクティブなカードのサイズを大きくします

ユーザーがクリックした料金プランの説明とともにカードのサイズを大きくするメカニズムを実装するCodePenのこのプロジェクトが本当に好きです。カードのプロパティflex-growを値に設定すると、カードのサイズが変更されます4。

アクティブなカードのサイズを大きくします

▍コンテナの内容がコンテナ自体よりも大きい場合はどうなりますか？

アイテムがコンテナに収まらない

少し前に、ある読者から、彼が抱えている問題について教えてくれ、それを解決するための助けを求めるメールを受け取りました。この問題の本質は前の図に示されています。コンテナ要素内にあるはずの画像がいくつかありますが、これらの画像はコンテナよりも大きくなっています。

このスタイルを試してみましょう：

.wrapper {
    display: flex;
}

.wrapper img {
    flex: 1;
}

ただし、プロパティを使用する場合でも、flex: 1画像はコンテナに配置されません。CSS仕様の参照：

Flexアイテムは、デフォルトでは、コンテンツのサイズ（最長の単語または固定サイズの要素の長さ）よりも小さくなりません。これを変更するには、min-widthまたはmin-heightプロパティを使用する必要があります。

私たちの場合、問題は、画像が大きすぎてフレックスボックスモデルのサイズを変更してコンテナに収まらないことです。次のように修正できます。

.wrapper img {
    flex: 1;
    min-width: 0;
}

詳細については、私のこの記事を参照してください。

結果

ここでは、プロパティflexとその使用方法について説明しました。この資料から、新しくて役立つことを学んだことを願っています。

プロジェクトでflexCSSプロパティを使用していますか？

CSSフレックスプロパティの調査