序章

Flexbox は、レイアウトの柔軟性を高め、レスポンシブレイアウトデザインを簡素化するための優れた方法です。 これにより、2D平面上で要素を簡単に位置合わせでき、主なプロパティに慣れれば非常に使いやすくなります。

最初のステップは、コンテナ要素に display:flexを設定することです。 フレックスコンテナの子はフレックスアイテムになります。 一連のプロパティをフレックスコンテナに適用して、すべてのアイテム全体に影響を与えることができます。また、別の一連のプロパティをフレックスアイテムに適用して、ターゲットアイテムに影響を与えることができます。 フレックスアイテムは、それに含まれる要素のフレックスコンテナになることもできるため、複雑なレイアウトを簡単に作成できます。

ブラウザのサポート: 2020年のデータは、世界中の98% ofブラウザがベンダープレフィックスを必要とせずにflexboxをサポートすることを示しています。

以下は、Flexboxを一目で理解するのに役立つ簡単な入門書です。 これは、利用可能なすべてのプロパティ、値、およびエッジケースの完全なリストではなく、最も有用な、または一般的に使用されるプロパティの簡単な要約です。

フレックスコンテナのプロパティ

これは、3つの span フレックスアイテムを含むコンテナです。Flexboxなし:

<div class="box">
  <span class="item">
    <img src="/images/dino.svg" width="64" height="45" alt="Dino Sammy">
  </span>
  <span class="item">
    <img src="/images/steampunk.svg" width="64" height="45" alt="Steampunk Sammy">
  </span>
  <span class="item">
    <img src="/images/skeleton.svg" width="64" height="45" alt="Skeleton Sammy">
  </span>
</div>





ディスプレイ:フレックス

それでは、コンテナに display:flex を設定するだけで、自動的に改善していきましょう。 アイテムがコンテナ内の使用可能なスペースに自動的に拡張されることに注目してください。

.container {
  display: flex;
}





フレックス方向

flex-direction プロパティを使用して、アイテムの方向を変更できます。

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





デフォルトはrowで、追加の使用可能な値は row-reverse column column-reverseです。

row-reverseおよびcolumn-reverseは、HTMLマークアップの順序を変更せずに、アイテムの視覚的な順序を変更します。

.container {
  display: flex;
  flex-direction: column-reverse;
}





行と列の方向を変更する機能により、メディアクエリでCSSルールを1回変更するだけで、小さなデバイスのレイアウトを非常に簡単に適応させることができます。

正当化-コンテンツ

justify-content を使用して、アイテムを主軸に揃えます。 主軸は、フレックス方向がの場合はY軸、フレックス方向がの場合はX軸です。

デフォルト値はflex-startで、追加の使用可能な値は flex-end center space-between です。 space-aroundおよびspace-evenly

整列-アイテム

align-itemsjustify-contentに似ていますが、アイテムを交差軸に揃えることができます。 デフォルトはstretchで、 flex-start flex-end center baselineも受け入れます。

整列-コンテンツ

align-contentalign-itemsに似ていますが、複数行のフレックスアイテムがある場合にのみ効果があります(以下のフレックスラップを参照)。 デフォルトはstretchで、 flex-start flex-end center space-betweenも受け入れます。 、スペース-均等

フレックスラップ

デフォルトでは、アイテムは折り返されません(デフォルトは nowrap )ので、アイテムが使用可能なスペースよりも多くのスペースを占める場合、それらはオーバーフローします。 これは、flex-wrapwrapの値に設定することで修正できます。

フレックスラップ: nowrap wrap

フレックスアイテムのプロパティ

整列-自己

align-selfalign-itemsと同じですが、特定のアイテム専用です。 これにより、メインルールから外れたフレックスアイテムを簡単に作成できます。

フレックスグロー

flex-grow を使用すると、フレックスアイテムが他のアイテムと比較して占めるスペースの量を制御できます。 flex-grow は数値を受け入れ、他のアイテムのflex-grow値に応じて、使用可能なスペースの一部を表します。 デフォルトの値は0です。これは、アイテムが使用可能な空きスペースを占有しないことを意味します。

これは比率に基づいているため、たとえば、すべてのアイテムをフレックスグロー200に設定することは、すべてのアイテムをフレックスグロー1に設定することと同じです。

次の例では、最初のアイテムのデフォルトのフレックスグロー値は0、2番目のアイテムの値は1、3番目のアイテムの値は2です。



フレックスグロー:1
フレックスグロー:2

フレックスシュリンク

flex-shrink は、 flex-grow の反対であり、アイテムの収縮性を定義します。 デフォルトの値は1です。これは、アイテムが縮小できることを意味し、フレックスグローと同様に、他のアイテムとの比率に基づいています。

フレックスベース

flex-basis は、アイテムが取る開始スペースを定義しますが、スペースの可用性や、埋めるスペースがあるかどうかにも依存するため、これは保証ではありません。

説明のために、次の例では、すべてのアイテムのフレックスベースが 25%です。






…しかし、最初のフレックスアイテムに1のフレックスグローを与えましょう。 次の例では、すべてのアイテムのフレックスベースが 25%ですが、最初のアイテムはフレックスグロー値が1であるため、残りの使用可能なスペースを占有します。

flex-grow:1



…そして最後に、ここで3番目のアイテムは77%のフレックスベースを持ち、 flex-shrink 値を持っているため、25%のフレックスベースを持つ他のアイテムのためのスペースを作るために縮小することを拒否します0の:





フレックスベース:77%; flex-shrink:0;
.item {
  flex-basis: 25%;
}
.item:last-child {
  flex-basis: 77%;
  flex-shrink: 0;
}

フレックス

flex は、 flex-grow flex-shrink 、およびflex-basisの組み合わせの省略形のプロパティです。 たとえば、flex-grow値が2、flex-shrink値が0、flex-basisが2remのアイテムの構文は次のとおりです。

.item {
  flex: 2 0 2rem;
}