CSS3 の新しいレイアウト: flex の詳細な説明

Flexの基本概念

フレックスレイアウト (フレックスはフレキシブルボックスの略)、エラスティックボックスモデルとも呼ばれます。属性と属性値 (display:flex;) が記述されるタグスタイルはコンテナーであり、そのすべての子要素は自動的にアイテムと呼ばれるコンテナーメンバーになります。

要素の表示値が flex の場合、すべての項目 (子要素) が 1 行に表示されます。すべての項目のサイズの合計がコンテナーより大きい場合でも、親要素の幅と高さを超えることはありません。行の折り返しはありません (各項目は比例して自動的に縮小されます)。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>レイアウト: flex</title>
    <link rel="スタイルシート" href="./CSS/normalize.css">
    <スタイル>
        セクション {
            幅: 500ピクセル;
            高さ: 800ピクセル;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
        }
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
    </スタイル>
</head>
<本文>
    <セクション>
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </セクション>
</本文>
</html>

ページ効果: 各コンテナは比例して縮小されます

CSS コードには、コンテナーに適したもの (主軸の開始位置、改行、主軸の配置、複数軸の配置の設定) と、プロジェクトに適したもの (プロジェクトの位置の設定) の 2 種類があります。

コンテナの共通プロパティとプロパティ値

重複するコードが多いので、一つ一つコードをアップすることはしません。自分でやってみて、コードを入力して試してみてください。

1. 主軸の開始方向を設定する flex-direction:

デフォルトはX軸（行）です。

<スタイル>
        セクション {
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
            /* フレックス方向: 行; */
            /* フレックス方向: 行反転; */
            /* フレックス方向: 列; */
            /* フレックス方向: 列反転; */
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
    </スタイル>

flex-direction:row; デフォルトでは、X 軸の開始方向は開始位置 (左から右に配置) になります。

flex-direction:row-reverse; X 軸の開始方向を終了位置 (右から左に配置) に変更します。

主軸の開始方向を Y 軸 (列) に設定します。

flex-direction:column; デフォルトでは、Y軸の開始方向は開始位置（上から下へ配置）です。

flex-direction:column-reverse; Y軸の開始方向を終了位置（下から上に配置）に変更します。

2. アイテムを flex-wrap でラップするかどうかを設定します。(デフォルトはラップなし)

<スタイル>
        セクション {
            幅: 400ピクセル;
            高さ: 400px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
    </スタイル>

flex-wrap: nowrap; デフォルト値は改行なしです。(n 個の項目が 1 行に表示されます。項目サイズの合計がコンテナの主軸のサイズより大きい場合、項目はそれに応じて自動的に縮小されます。) (最初のコードページの結果表示を参照)

flex-wrap: wrap; 改行を設定します。（主軸の幅を超える場合は折り返されます。改行後、垂直方向にスペースが残っているため、2行の間に隙間ができ、2行目の上下に均等に配分されます）

flex-wrap: wrap-reverse; 逆順に折り返します。(2 行ある場合、2 行目が前面に表示され、1 行目が背面に表示されます)

3. 主軸方向の配置: justify-content:

プロジェクトとは次のようなものです。

<スタイル>
        セクション {
            幅: 400ピクセル;
            高さ: 400px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
            /* コンテンツの端揃え: flex-start; */
            /* コンテンツの両端揃え: flex-end; */
            /* コンテンツの中央揃え: 中央; */
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
    </スタイル>

justify-content:flex-start; 主軸の開始方向に揃える（デフォルト）

justify-content:flex-end; 主軸の終了方向に揃える

justify-content:center; 主軸は中央に配置されます

プロジェクトが複数の場合:

<スタイル>
        セクション {
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
            /* コンテンツの両端揃え: スペース間の間隔; */
            /* コンテンツの両端揃え: スペースの周囲; */
            /* コンテンツの均等配置: スペース均等; */
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
    </スタイル>

justify-content: space-between; 両端を揃えます (最初の項目はコンテナの先頭に、最後の項目はコンテナの末尾に、その間の距離は等しくなります)

justify-content: space-around; 分散配置

justify-content: space-evenly; 残りのスペースを均等に分割し、各項目間の距離は同じになります

4.主軸と交差軸方向の整合

1 つの軸: 主軸を Y 軸に変更する必要があります: flex-direction: column;

align-items: baseline; アイテムの最初の行のテキストのベースラインに揃えます

align-items: Stretch; (アイテムに高さが指定されていない場合、Stretch がデフォルト値になります。アイテムに高さが設定されていない場合、コンテナの高さになります)

<スタイル>
        セクション {
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
            /* メイン軸を Y 軸に変更し、項目を列に配置する必要があります */
            flex-direction: 列;
            /* align-items: flex-start; デフォルトの配置*/
            /* 項目の位置合わせ: 中央; */
            /* align-items: flex-end; */
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
    </スタイル>

align-items: flex-start; 交差軸は開始位置から揃えられます

align-items: center; 交差軸を中央に揃える

align-items: flex-end; 交差軸は終了位置から揃えられます

複数の軸: (アイテムが折り返されて表示されるように、すべてのアイテムのサイズの合計はコンテナーのサイズよりも大きくする必要があります)

<スタイル>
        セクション {
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
            flex-direction: 列;
            flex-wrap: ラップ;
            /* コンテンツの位置を中央揃えにする; */
            /* align-content: flex-end; */
            /* コンテンツの位置揃え: スペース間の間隔; */
            /* コンテンツの位置揃え: スペースの周囲; */
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
    </スタイル>

align-content: flex-start; 交差軸は開始位置から揃えられます

align-content: center; 交差軸を中央に揃える

align-content: flex-end; 交差軸は終了位置から揃えられます

align-content: space-between; 交差軸の両端を揃える

align-content: space-around; 交差軸の分散配置

align-content: space-evenly; 交差軸を均等に分配する

プロジェクトのプロパティとプロパティ値:

1. 順序はアイテムの位置を制御します

順序: 1;

値: 正または負 (デフォルト値は 0)

値が小さいほど前方に近くなり、値が大きいほど後方に近くなります。

（適用シナリオ：1.検索エンジン最適化、SEOを改善し、レイアウトに影響を与えずに重要な情報をHTMLコードの先頭に配置する2.プロジェクトの位置を調整する）

<スタイル>
        セクション {
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
        
        div:n番目の子(4) {
            順序: -1;
        }
    </スタイル>

交差軸上の 1 つ以上の [項目] の配置を設定します。

<スタイル>
        セクション {
            幅: 800ピクセル;
            高さ: 400px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
        
        div:n番目の子(2) {
            位置合わせ: 中央;
        }
        
        div:n番目の子(3) {
            align-self:flex-end;
        }
    </スタイル>

align-self: flex-start; アイテムを交差軸の始点に配置するように設定します（デフォルトの位置）

align-self: center; アイテムを交差軸の中央に配置するように設定します

align-self: flex-end; 交差軸の端に配置するアイテムを設定します

1つまたは複数の要素の拡大率を設定する

条件: すべての項目のサイズの合計は、コンテナーのサイズよりも小さくする必要があります (残りのスペースがない場合、このプロパティを設定しても効果はありません)。

要素にflex-growプロパティがある

<スタイル>
        セクション {
            幅: 800ピクセル;
            高さ: 400px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
        }
        
        div:n番目の子(2) {
            フレックス成長: 1;
        }
    </スタイル>

複数のアイテムにflex-grow属性がある

<スタイル>
        セクション {
            幅: 800ピクセル;
            高さ: 200px;
            境界線: 2px 黒一色;
            マージン: 50px 自動;
            ディスプレイ: フレックス;
            ボックスのサイズ: 境界線ボックス;
        }
        
        div {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線トマト;
            ボックスのサイズ: 境界線ボックス;
        }
        
        div:n番目の子(2) {
            フレックス成長: 1;
        }
        
        div:n番目の子(4) {
            フレックス成長: 2;
        }
    </スタイル>

エフェクト表示

コンテナの残りのスペースを対応する数の flex-grow シェアに分割し、各アイテムのシェア数に応じて flex-grow 属性を持つアイテムに分配します。

つまり、flex は非常に使いやすく、レスポンシブレイアウトだけでなく、聖杯レイアウトにも適用できます。ただ、特性が多いので、どんどん練習して使いこなせるようになると思います。

非常に興味深く、flex の使用を強化できる小さなゲームをお勧めします: Flexbox Froggy http://blog.xiaoboswift.com/flexbox/#zh-cn 小さなカエルが家に帰るのを手伝ってください~~

要約する

CSS3 の新しいレイアウト: flex の詳細な説明に関するこの記事はこれで終わりです。より関連性の高い CSS flex レイアウトコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL グローバルロックとテーブルレベルロックの具体的な使用法

>>: HTML マーキータグの使用例