【CSS】「display:flex;」を使ったレスポンシブデザインに便利なフレキシブルボックス(flexible box、flexbox)の概念＜1＞

今までフレキシブルボックス(flexible box)作成に適用されてきた「display:box」や「display:flexbox」という書き方は、もはや古いものになりました。

CSSのフレキシブルレイアウトが新しく再定義されました。フレキシブルボックスとは、複雑なウェブサイトの様々なスクリーンサイズやディスプレイデバイスに柔軟なページレイアウトが実現できるCSS3の新しいレイアウトモジュール(Flexible Box Layout Module)です。

複雑なレイアウトでもより簡単にフレキシブなレイアウトを実装することができます。flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。

Flexボックスは親要素に「display:flex;」を指定することで、floatやclearfix、擬似要素を使わななくても柔軟性のあるレイアウトが実装できるのが特徴です。

Flex container(フレキシコンテナ)

flexアイテムを含む親要素です。Flexコンテナはdisplayプロパティの値にflexかinline-flexを、「display:flex / display:inline-flex」で指定することで定義されます。

Flex item(フレキシアイテム)

Flexコンテナの子要素としてflex アイテムとなります。親要素のflexコンテナにflex値を指定することで子要素は自動的にflexアイテムになります。

特にCSSで別途指定する必要はないです。

Main-axis(主軸)

Flexibleボックスは2つの軸を持っています。flexの親要素であるflexコンテナ(flex container)にはmain-start(始点)とmain-end(終点)があります。

この2点を結んだのがmain-axis(主軸)で、平行な軸です。

Cross-axis(交差軸)

Main-axis(主軸)に対して垂直な軸となり、Main-axisがHorizontalの場合、Cross-axisはVerticalになります。

flexibleボックスのプロパティ
flex-direction	親要素のflexコンテナに置かれている子要素をどのように配置するか指定します。 flexコンテナの主軸の方向を設定することで、子要素のflexアイテムの方向が決まります。
justify-content	Flexアイテムをどのようにflexコンテナの主軸に沿ってレイアウトするかを定義します。始点のmain-startと終点のmain-end があります。この2点を結んだものが主軸です。
align-items	Flexアイテムをどのようにflexコンテナの交差軸に沿ってレイアウトするかを定義します。flexアイテムを垂直方向の配置を示します。始点は cross-start、終点は cross-end となります。

flexible boxの指定

flexboxレイアウトを使うには、HTMLの親要素のdisplayプロパティに「flex」を指定するだけです。下記のように、当該要素をflexコンテナとして、子要素をflex アイテムとして定義します。

flex値はflexコンテナをブロックレベル要素にします。inline-flex値は、flex コンテナをインラインレベル要素にします。

CSS

</style>
 .main_flex {
　　display : flex;
　　display : -webkit-flex;
　　}
 
 .main_inline-flex {
　　display : inline-flex;
　　display : -webkit-inline-flex;
　　}
</style> 

flex-direction

row	テキスト子要素と同じ方向で、通常flexアイテムは左から右へ水平方向に配置されます。デフォルト値となります。
row-reverse	row値の反対としてflexアイテムは右から左へ水平方向に配置されます。
column	flexアイテムは上から下へ垂直方向に配置されます。
column-reverse	flexアイテムは下から上へ垂直方向に配置されます。

justify-content(水平方向の整列)

flex-start	子要素Flexアイテムを横配置の場合は「左揃え」、縦配置の場合は「上揃え」に始端から間隔なしに配置されます。
flex-end	flex-start値の逆です。Flexアイテムを横配置の場合は終端から間隔なしで「右揃え」、縦配置の場合は「下揃え」になります。
center	Flexアイテムを上下中央寄せになります。
space-between	Flexアイテムは均等に間隔を空けて配置されます。左右両端のflexアイテムの始端と終端には空間が入りません。「flexアイテム」の横幅の合計が「flexコンテナ」の横幅より長い場合、この値は「flex-start」値と同一になります。
space-around	flexアイテムは全てのアイテムは等間隔に配置されます。space-betweenと同じく均等の間隔で配置されますが、左右両端のflexアイテムは外側に間隔の半分ほどの空間ができます。「flexアイテム」の横幅の合計が「flexコンテナ」の横幅より長い場合、この値は「center」値と同様になります。

align-items(垂直方向の整列)

flex-start	flexアイテムはflexコンテナのクロス軸の始点(cross start、上揃え)に配置されます。
flex-end	flex-start値の逆です。flexアイテムはflexコンテナのクロス軸の始点(cross end、下揃え)に配置されます。
center	Flexアイテムを中央寄せに収納します。
baseline	Flexアイテムはベースライン揃えで配置されます。
stretch	flexコンテナのの高さまでいっぱいに広がります。