CSS3フレキシブルレイアウトエラスティックフロー(flex-flow)属性の詳細説明と例_html/css_WEB-ITnose

フレキシブル レイアウトは、CSS3 によって導入された強力なレイアウト方法であり、これまでの Web 開発者が使用していた複雑でエラーが発生しやすいハック (同様の流動的なレイアウトに float を使用するなど) を置き換えるために使用されます。

flex-flow は flex-direction 属性と flex-wrap 属性の略称であり、構文は次のとおりです。

flex-flow:

flex-direction : row( 初期値) | row-reverse | column-reverse

flex-wrap: ラップ (初期値)

flex-direction は、フレキシブル コンテナ内のフレキシブル アイテムの配置方向を定義します。デフォルトは行、つまり行内方向です (通常は左から右ですが、これは書き込みモードに関係することに注意してください)。

flex-wrap は、フレックス項目をコンテナーに含めるために行を分割する必要があるかどうかを定義します。 *-reverse は反対方向を表します。

2 つの flex-flow 属性の組み合わせにより、主軸方向と交差軸方向のフレックス コンテナーの表示モードが決まります。次の例は、各属性値の違いを直感的に示しています。上の例の最初のフレックス項目リストではデフォルト属性である row が使用されており、必要に応じてフレックス項目の幅は圧縮されません。

2 番目のリストでは列の折り返しが使用されています。これは、主軸の方向が上から下であり、行分割の方向が行内方向 (右へ) であることを意味します。

3 番目のリストは、行反転ラップ反転を使用します。これは、主軸の方向が行内で逆方向 (右から左) になり、新しい行が上向きに分割されることを意味します。

オンラインの例を通じて自分で試すことができます: http://wow.techbrood.com/fiddle/16981

by iefreer