フレキシブルボックスモデル - コンテナプロパティの理解-H5 チュートリアル-php.cn

フレキシブルボックスモデル - コンテナプロパティの理解

一个新手

リリース： 2017-10-16 10:31:32

オリジナル

2065 人が閲覧しました

従来のレイアウトスキームはボックスモデルに基づいており、表示属性 + 位置属性 + フロート属性に依存します。たとえば、垂直方向のセンタリングを実現するのが難しいなど、特殊なレイアウトでは非常に不便です。
2009年にW3Cは、さまざまなページレイアウトを簡単、完全、レスポンシブに実現できる新しいソリューション、Flexレイアウトを提案しました。現在、この機能はすべてのブラウザでサポートされているため、この機能を安全に使用できるようになりました。
Flexレイアウトを利用した要素をFlexコンテナ（フレックスコンテナ）、略して「コンテナ」と呼びます。そのすべての子要素は自動的に、「アイテム」と呼ばれる Flex アイテム (フレックスアイテム) と呼ばれるコンテナメンバーになります。
今日は、フレキシブルボックスモデルに関する私の洞察と経験を共有します。欠点がある場合は、修正するためにメッセージを残してください。
インターネットで弾性ボックスモデルに関する知識を読んだことがありますが、Baidu でこの分野の知識を持っている人は、最初に実験を理解したときに混乱したと思います。、次に戻ってください。今日は主軸と交差軸を分離しますが、それでも主軸と交差軸を確認する必要があります。簡単に言うと、まずメイン軸を次のように考えます。水平軸とクロス軸は、以下のコードと効果を直接見てみましょう。フレキシブルボックスの知識を深く理解し、フレキシブルボックスを適用してレイアウトを作成できること。

1. 初期のコードとスタイルは次のとおりです。次に、コードを追加して、スタイルの違いを確認するためにコードを修正します。 ️コンテナです。コード内のコンテナは ul で、プロジェクトは li です。さて、魔法のスタイルを確認するためにコードを追加してみましょう。

フレキシブルボックスの場合、最初の条件はdisplay:flex;を追加することです

以下の属性はコンテナ属性であり、すべてulに追加されます。

1. フレックス方向: スピンドルの方向を決定します。 1. flex-direction: row; (主軸方向:横/左から右への行配置)

この属性をコンテナulに追加すると以下のようなスタイルとなり、横方向に表示できることがわかります。

弾力性といえば、この効果を試して外容器の幅を小さくしてみましょう

まずはこれくらいまで小さくしてみましょう幅が小さいままだと、違うことがわかります。たとえ幅が縮小された後でも折り返されず、その幅は縮小後もその内部のコンテンツの幅を維持します。

2.flex-direction:row-reverse;（主軸を右から左に配置）

3.flex-direction:column（主軸を上から下に配置） )

4.flex-direction:column-reverse; (主軸は垂直で下から上に配置されます)

2. flex-wrap: この属性は flex かどうかを制御します。単一行または複数行 (注: ここでは幅を小さく調整して 300px に変更しました)

1.flex-wrap:nowrap; (デフォルト値、行折り返しなし)彼は勝ちました。行を折り返さない

2.flex-wrap:wrap; 1 行の位置を変更し、2 行目と最後から 2 番目の行の位置を変更する、など)

3 つ目は、flex-flow; flex-direction と flex-wrap のデフォルトは row nowrap; です

1. flex-flow:row-reverse Wrap (右から左へ配置、ラップ)

組み合わせ属性を書いて、他のスタイルを自分で試してみてください。
4. justify-content は主軸上の項目の配置を定義します
注：次の実験では、flex-wrap:wrap; という改行属性を追加しました（識別しやすい）
1.justify-content:flex-start ; (左揃え)