Flexboxガイド

FlexboxはFlexibleBox Moduleとも呼ばれ、CSSグリッドとともに2つの最新のレイアウトシステムの1つです。

前書き

FlexboxはFlexibleBox Moduleとも呼ばれ、CSSグリッドとともに2つの最新のレイアウトシステムの1つです。

CSSグリッド(2次元)と比較すると、flexboxは一次元レイアウトモデル。行または列に基づいてレイアウトを制御しますが、同時には制御しません。

flexboxの主な目標は、設定したいくつかのルールに応じて、アイテムがコンテナによって提供されるスペース全体を埋めることができるようにすることです。

IE8やIE9などの古いブラウザをサポートする必要がない限り、Flexboxは使用を忘れさせるツールです。

  • テーブルレイアウト
  • フロート
  • clearfixハック
  • display: tableハック

フレックスボックスに飛び込んで、非常に短い時間でそのマスターになりましょう。

ブラウザのサポート

執筆時点(2018年2月)では、ユーザーの97.66%がサポートしており、最も重要なすべてのブラウザーが何年にもわたって実装しているため、古いブラウザー(IE10 +を含む)でもカバーされています。

Browser support

ユーザーがCSSグリッドに追いつくまで数年待つ必要がありますが、Flexboxは古いテクノロジーであり、現在使用できます。

Flexboxを有効にする

フレックスボックスレイアウトは、設定することにより、コンテナに適用されます

display: flex;

または

display: inline-flex;

コンテンツコンテナ内フレックスボックスを使用して位置合わせされます。


コンテナのプロパティ

一部のフレックスボックスプロパティはコンテナに適用され、コンテナのアイテムの一般的なルールが設定されます。彼らです

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • flex-flow

行または列を揃える

私たちが最初に目にするプロパティは、flex-direction、コンテナがアイテムを行として配置するか、列として配置するかを決定します。

  • flex-direction: rowアイテムを、テキスト方向(西側諸国の場合は左から右)
  • flex-direction: row-reverseのようにアイテムを配置しますrowしかし反対方向に
  • flex-direction: columnにアイテムを配置しますカラム、上から下への注文
  • flex-direction: column-reverseのように、アイテムを列に配置しますcolumnしかし反対方向に

Rows or columns

垂直方向と水平方向の配置

デフォルトでは、アイテムは左から始まります。flex-directionですrow、および上からflex-directionですcolumn

Vertical and horizontal alignment

この動作は、を使用して変更できますjustify-content水平方向の配置を変更するには、align-items垂直方向の配置を変更します。

水平方向の配置を変更する

justify-content5つの可能な値があります:

  • flex-start:コンテナの左側に揃えます。
  • flex-end:コンテナの右側に揃えます。
  • center:コンテナの中央に揃えます。
  • space-between:それらの間に等間隔で表示します。
  • space-around:周囲を等間隔で表示

Horizontal alignment

垂直方向の配置を変更する

align-items5つの可能な値があります:

  • flex-start:コンテナの上部に揃えます。
  • flex-end:コンテナの底に合わせます。
  • center:コンテナの垂直方向の中央に揃えます。
  • baseline:コンテナのベースラインに表示します。
  • stretch:アイテムはコンテナに合うように引き伸ばされます。

Vertical alignment

に関する注記baseline

baselineに似ていますflex-startこの例では、ボックスが単純すぎるためです。チェックアウトこのCodepenもともとによって作成されたペンからフォークした、より便利な例がありますマーティンミカレク。ご覧のとおり、アイテムの寸法は揃えられています。

ラップ

デフォルトでは、フレックスボックスコンテナ内のアイテムは単一の行に保持され、コンテナに収まるように縮小されます。

アイテムを複数の行に強制的に分散させるには、flex-wrap: wrap。これにより、で設定された順序に従ってアイテムが配布されますflex-direction。使用するflex-wrap: wrap-reverseこの順序を逆にします。

と呼ばれる省略形のプロパティflex-flow指定できますflex-directionそしてflex-wrapを追加することにより、1行でflex-direction最初に値、次に値flex-wrap値、例:flex-flow: row wrap


各アイテムに適用されるプロパティ

これまで、コンテナに適用できるプロパティを見てきました。

単一のアイテムにはある程度の独立性と柔軟性があり、次のプロパティを使用して外観を変更できます。

  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

それらを詳しく見てみましょう。

注文を使用してアイテムを次のアイテムの前後に移動する

アイテムは、割り当てられた順序に基づいて順序付けられます。デフォルトでは、すべてのアイテムに順序があります0HTMLの外観によって、最終的な順序が決まります。

このプロパティは、を使用してオーバーライドできますorder個別のアイテムごとに。これは、コンテナではなく、アイテムに設定するプロパティです。負の値を設定することで、アイテムを他のすべてのアイテムの前に表示させることができます。

Moving items before or after another one

align-selfを使用した垂直方向の配置

アイテムは選択できますオーバーライドコンテナalign-items設定、使用align-self、これは同じ5つの可能な値を持ちますalign-items

  • flex-start:コンテナの上部に揃えます。
  • flex-end:コンテナの底に合わせます。
  • center:コンテナの垂直方向の中央に揃えます。
  • baseline:コンテナのベースラインに表示します。
  • stretch:アイテムはコンテナに合うように引き伸ばされます。

Vertical alignment

必要に応じてアイテムを拡大または縮小します

フレックスグロー

The defaut for any item is 0.

すべてのアイテムが1として定義され、1つが2として定義されている場合、大きい方の要素は2つの「1」アイテムのスペースを取ります。

フレックスシュリンク

The defaut for any item is 1.

すべてのアイテムが1として定義され、1つが3として定義されている場合、大きい要素は他の要素の3倍縮小します。使用可能なスペースが少なくなると、必要なスペースは3分の1になります。

フレックスベース

に設定されている場合auto、幅または高さに応じてアイテムのサイズを変更し、に基づいてスペースを追加しますflex-growプロパティ。

0に設定すると、レイアウトの計算時にアイテムに余分なスペースが追加されません。

ピクセル数の値を指定すると、それが長さの値として使用されます(幅または高さは、行または列のアイテムであるかどうかによって異なります)

フレックス

このプロパティは、上記の3つのプロパティを組み合わせたものです。

  • flex-grow
  • flex-shrink
  • flex-basis

簡略構文を提供します。flex: 0 1 auto

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: