今までフレキシブルボックス(flexible box)作成に適用されてきた「display:box」や「display:flexbox」という書き方は、もはや古いものになりました。
CSSのフレキシブルレイアウトが新しく再定義されました。フレキシブルボックスとは、複雑なウェブサイトの様々なスクリーンサイズやディスプレイデバイスに柔軟なページレイアウトが実現できるCSS3の新しいレイアウトモジュール(Flexible Box Layout Module)です。
複雑なレイアウトでもより簡単にフレキシブなレイアウトを実装することができます。flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。
Flexボックスは親要素に「display:flex;」を指定することで、floatやclearfix、擬似要素を使わななくても柔軟性のあるレイアウトが実装できるのが特徴です。
flexアイテムを含む親要素です。Flexコンテナはdisplayプロパティの値にflexかinline-flexを、「display:flex / display:inline-flex」で指定することで定義されます。
スポンサーリンク
Flexコンテナの子要素としてflex アイテムとなります。親要素のflexコンテナにflex値を指定することで子要素は自動的にflexアイテムになります。
特にCSSで別途指定する必要はないです。
Flexibleボックスは2つの軸を持っています。flexの親要素であるflexコンテナ(flex container)にはmain-start(始点)とmain-end(終点)があります。
この2点を結んだのがmain-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 となります。 |
スポンサーリンク
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>
row | テキスト子要素と同じ方向で、通常flexアイテムは左から右へ水平方向に配置されます。デフォルト値となります。 |
---|---|
row-reverse | row値の反対としてflexアイテムは右から左へ水平方向に配置されます。 |
column | flexアイテムは上から下へ垂直方向に配置されます。 |
column-reverse | flexアイテムは下から上へ垂直方向に配置されます。 |
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」値と同様になります。 |
flex-start | flexアイテムはflexコンテナのクロス軸の始点(cross start、上揃え)に配置されます。 |
---|---|
flex-end | flex-start値の逆です。flexアイテムはflexコンテナのクロス軸の始点(cross end、下揃え)に配置されます。 |
center | Flexアイテムを中央寄せに収納します。 |
baseline | Flexアイテムはベースライン揃えで配置されます。 |
stretch | flexコンテナのの高さまでいっぱいに広がります。 |
スポンサーリンク
スポンサーリンク
Category
BILLION WALLET Copyright©All rights reserved