フレキシブルレイアウトとは何ですか?フレキシブルレイアウトフレックスの基本的なアプリケーション (コード付き)-htmlチュートリアル-php.cn

フレキシブルレイアウトとは何ですか?フレキシブルレイアウトフレックスの基本的なアプリケーション (コード付き)

不言

リリース： 2018-08-01 14:55:10

オリジナル

4435 人が閲覧しました

伸縮性のあるレイアウトとは何ですか?フレキシブルレイアウト (flex) は、その名のとおり、現在では基本的にすべてのブラウザがフレキシブルレイアウトをサポートしています。したがって、この記事で次に共有するのは、フレキシブルレイアウト flex の基本的なアプリケーションです。

柔軟なレイアウトを適用する方法、コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .box{
            height:20vh;            
            display: flex;          
        }
        .box div{           
            flex: 1; 
        }
        .box div:last-child{
            flex: 2;
        }
    </style>
</head>
<body>
    <div>
        <div>Document1</div>
        <div>Document2</div>
        <div>Document3</div>
        <div>Document4</div>
        <div>Document5</div>
    </div>    
</body>
</html>

ログイン後にコピー

実行結果は次のとおりです:

フレキシブルレイアウトとは何ですか?フレキシブルレイアウトフレックスの基本的なアプリケーション (コード付き)

コンテナの設定

flexには設定できる6つの属性があります:

flex-direction:row(主軸は左から右、デフォルト) / row-reverse (主軸は右から左) / column (主軸は上から下) / column-reverse (主軸は下から上) を決定します。主軸の方向

flex-wrap:nowrap (デフォルト、行の折り返しなし) / Wrap (行の折り返し) / Wrap-reverse (行の折り返し、以下の最初の行) は、アイテムを 1 つの軸に配置できない場合の折り返し方法を決定します

flex-flow: は、上記の 2 つの属性 :flex-flow:row nowrap の省略モードのデフォルト値です。

justify-content: flex-start (デフォルト、左揃え) / flex-end (右揃え) / center (中央) / space-between (両端揃え、項目間の等間隔) /
space-around (各項目間の間隔は等しいため、項目間の間隔は項目と境界線の間の価格の 2 倍になります)。主軸上の項目の配置を決定します。 space-between/around は、間隔を適応的に調整するときに便利です

align-items: flex-start (交差軸の始点の位置合わせ) / flex-end (交差軸の終点の位置合わせ) / center (位置合わせ)交差軸の中点の) /baseline (項目のテキストの最初の行のベースライン配置)/stretch (デフォルト値。項目に高さが設定されていない場合、または自動に設定されている場合、項目は全体を占めます。コンテナの高さ)。交差軸上の項目の配置を定義します

align-content: flex-start (交差軸の始点に位置合わせ) / flex-end (交差軸の終点に位置合わせ) / center (交差軸の位置に位置合わせ)交差軸の中点) /
space-between (交差軸の両端に揃え、軸間の間隔は均等に分布します) /space-around (各軸の両側の間隔は等しいため、間の距離は軸は軸とフレームの間の距離よりも大きい Double)
/ストレッチ (デフォルト値、軸は交差軸全体を占めます)。複数の軸の配置を定義します。プロジェクトに独自の軸がある場合、このプロパティは機能しません。

順序: 数値が小さいほど、配置が高くなります。デフォルトは 0 です。

flex-grow: 項目の拡大率を定義します。デフォルトは 0 です。デフォルトでは、スペースが残っている場合でも項目は拡大されません。スケーリングの方向は、フレックス方向の方向です。

flex-shrink: アイテムの収縮率を定義します。デフォルトは 1 です。スペースが不十分な場合、アイテムは縮小します。値 0 は、スケーリングがないことを意味します。スケーリングの方向は、フレックス方向の方向です。

flex-basis: 余分なスペースを割り当てる前に、項目が占める主軸スペース (メインサイズ) を定義します。ブラウザは、この属性に基づいて主軸に余分なスペースがあるかどうかを計算しません。デフォルト値は auto です。アイテムの元のサイズです。 flex-basis: 80px; 幅 (方向は行) は 80px に設定されます。

flex: は上記の 3 つの属性の略称で、デフォルト値は 0 1 auto です。 auto (1 1 auto) ) およびなし (0 0 auto)

align-self: この属性により、遅延アイテムの配置を他のアイテムとは異なるものにすることができ、align-items の属性値をオーバーライドします。デフォルト値は auto で、親要素の align-items 属性を継承するか、親要素がない場合はストレッチを意味します。

align-self: auto/flex-start/flex-end/center/baseline/stretch flex-basis: 値が 0 の場合と auto (デフォルト) の違い: 前者は項目全体を計算しませんが、後者は無視しますコンテンツは計算されるため、レイアウトで各項目のパーセンテージ構成が必要な場合は、flex-basis を 0 に設定する必要があります。