フレックスレイアウトの経験

フレックスレイアウト

1.1フレックスレイアウトよりも従来のレイアウト

従来のレイアウト

良好な互換性
面倒なレイアウト
制限事項、モバイル端末での適切なレイアウトではなくなりました

フレックスフレキシブルレイアウト

便利な操作、シンプルなレイアウトセット、幅広いモバイルアプリケーション
PCブラウザのサポートが不十分
IE 11以下、サポートされていないか、部分的にのみサポートされている

提案：

PC側のページレイアウトの場合でも、従来のレイアウトがあります。
互換性の問題を考慮しないモバイル端末またはPC側のページレイアウトの場合でも、フレックスフレキシブルレイアウトを使用します

1.2最初の経験

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
     
     
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 排列 */
            justify-content: space-around; 
        }
        div span {
     
     
            /* width: 150px; */
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            /* 各占1排列好 */
            flex: 1;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

2.フレックスレイアウトの原則

2.1レイアウトの原則

FlexはflexibleBoxの略で、「flexiblelayout」を意味します。boxモデルに最大限の柔軟性を提供するために使用されます。任意のコンテナをflexlayoutとして指定できます。

親ボックスにフレックスレイアウトを設定すると、子要素のfloat、clear、vertical-align属性は無効になります。
フレキシブルレイアウト=フレキシブルレイアウト=フレキシブルボックスレイアウト=貪欲なレイアウト=フレックスレイアウト
は、「コンテナ」と呼ばれるフレックスコンテナ（フレックスコンテナ）と呼ばれるフレックスレイアウト要素を使用し、それらのすべての子要素は自動的にフレックスアイテムと呼ばれるコンテナメンバーと呼ばれます（フレックスアイテム）、「アイテム」と呼ばれます。
経験上、divはフレックスの親コンテナです。
経験上、スパンはサブコンテナのフレックスアイテムです。
サブコンテナは、水平または垂直に配置できます。

フレックスレイアウトの原則を要約します。
親ボックスにフレックス属性を追加して、子ボックスの位置と配置を制御します。

ここに画像の説明を挿入

3.フレックスレイアウトの親アイテムの共通属性

3.1共通の親属性

親要素には次の6つの属性が設定されています

flex-direction：主軸の方向を設定します
justify-content：主軸上のサブ要素の配置を設定します
flex-wrap：子要素をラップするかどうかを設定します
align-content：クロス軸上のサブ要素の配置を設定します（複数行）
align-items：クロス軸上のサブ要素の配置を設定します（単一の線）
flex-flow：複合属性。flex-directionとflex-wrapを同時に設定するのと同じです。

3.2屈曲方向主軸の方向を設定する⭐

メインシャフトとサイドシャフト

フレックスレイアウトでは、主軸と横軸の2つの方向に分割されます。同じ名前は、行と列、x軸とy軸です。

デフォルトの主軸方向は、水平方向に右のx軸方向です。
デフォルトの横軸方向はy軸方向で、水平方向に下向きです。

2.属性値

flex-directionプロパティは、主軸の方向（つまり、アイテムの配置方向）を決定します。
注：主軸と側軸は、フレックス方向の主軸として誰が設定されているかによって変わります。、残りは側軸です。そして、私たちの子要素は主軸に沿って配置されています
ここに画像の説明を挿入

<style>
        div {
     
     
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴行 row,写和没写是一样的，那么y轴就是侧轴 */
            /* flex-direction: row; */
            /* 简单理解 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以把我们的主轴设置 y轴 那么 x 轴就成了侧轴 */
            flex-direction: column;
        }
        div span {
     
     
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

3.3 justify-contentは、主軸上のサブ要素の配置を設定します

justify-content属性は、主軸上のアイテムの配置を定義します。
注：この属性を使用する前に、どの主軸が
ここに画像の説明を挿入

 <style>
        div {
     
     
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素排列方式*/
            /* 顺序不变，向左边对齐，默认 */
            justify-content: flex-start;
            /* 顺序不变，向右边对齐 */
            justify-content: flex-end;
            /* 让我们子元素居中对齐 */
            justify-content: center;
            /* 平分剩余空间 */
            justify-content: space-around;
            /* 先两边贴边，在分配剩余的空间 */
            justify-content: space-between;


        }
        div span {
     
     
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>

3.4flex-wrap子要素を折り返すかどうかを設定します⭐

デフォルトでは、アイテムはflex-wrap属性で定義された線（「軸」とも呼ばれます）に配置され、flexレイアウトはデフォルトでは折り返されません。
ここに画像の説明を挿入

    <style>
        div {
     
     
            /* 给父级添加flex属性 */
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行，如果装不开，会缩小子元素的宽度，放到父元素里面 */
            /* flex-wrap: nowrap; */
            /* 换行 */
            flex-wrap: wrap; 
        }
        div span {
     
     
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

3.5整列アイテムは、クロス軸上のサブ要素の配置を設定します（単一行）⭐

この属性は、サブアイテムが単一のアイテムである場合に、サイド軸（デフォルトはy軸）でのサブアイテムの配置を制御するために使用されます。
ここに画像の説明を挿入

    <style>
        div {
     
     
            /* 给父级添加flex属性 */
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            justify-content: center;
            /* 我们需要一个侧轴居中 */
            align-items: center;
            /* 拉伸，但是子盒子不要给高度，否则无变化 */
            align-items: stretch;
            /* 如果主轴变换为主轴有不同 */
        }
        div span {
     
     
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

3.6 align-contentは、クロス軸上のサブ要素の配置を設定します（複数の行）

子の配置を交差軸上に設定し、子が折り返されているように見える場合（複数行）にインテリジェントに使用します。1行では効果はありません。
ここに画像の説明を挿入

<style>
        div {
     
     
            /* 给父级添加flex属性 */
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            /* align-content: flex-start; */
            /* 居中 */
            /* align-content: center; */
            /* 一个贴上，一个贴下 */
            /* align-content: space-between; */
            /* 上面一个距离，下面一个距离 */
            align-content: space-around;


        }
        div span {
     
     
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

3.6align-contentとalign-itemsの違い

align-itemsは単一行に適しており、上揃え、下揃え、センタリング、ストレッチのみに適しています
align-contentは、行の折り返し（複数行）に適しています（単一行には無効です）。配置、下部配置、中央揃え、拡大、さらには残りのスペースの分散を設定できます。
要約は、1行でalign-itemsを検索し、複数行でalign-contentを検索することです。

3.フレックスレイアウトの親アイテムの共通属性

3.7フレックスフロー

flex-flowプロパティは、flex-directionプロパティとflex-wrapプロパティの複合プロパティです。

フレックスフロー：行ラップ;

flex-direction：主軸の方向を設定します
justify-content：主軸上のサブ要素の配置を設定します
flex-wrap：子要素をラップするかどうかを設定します
align-content：クロス軸上のサブ要素の配置を設定します（複数行）
flex-flow：複合属性。flex-directionとflex-wrapを同時に設定するのと同じです。

4.フレックスレイアウトサブアイテムの一般的な属性

フレックスサブアイテムが占めるコピーの数
align-selfは、クロス軸上での子自身の配置を制御します
order属性は、子の順序を定義します（前から後ろへの順序）

4.1フレックスプロパティ

flex属性は、サブアイテムによって割り当てられる残りのスペースを定義し、flexを使用して必要なコピー数を示します。

.item {
	flex: <number>; /* default 0 */
}

ここに画像の説明を挿入

    <style>
        section {
     
     
            display:flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
     
     
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
     
     
            flex: 1;
            width: 100px;
            height: 150px;
            background-color: green;
        }

        section div:nth-child(3) {
     
     
            width: 100px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

結果：
ここに画像の説明を挿入
どのように理解するか？
フレックスは実際にはケーキを食べることを意味します

4.フレックスレイアウトアイテムの一般的な属性

4.2 align-selfは、横軸上の子供自身の配置を制御します

align-self属性を使用すると、単一のアイテムを他のアイテムとは異なる配置にすることができ、align-items属性をオーバーライドできます。デフォルト値はautoです。これは、親要素のalign-items属性が継承されることを意味します。親要素がない場合は、stretchと同等です。

span:nth-child(2) {
	/* 设置自己在侧轴上的排列方式*/
	align-self: flex-end;
}

4.3 order属性は、アイテムの順序を定義します

値が小さいほど、配置は高くなります。デフォルトは0です。
注：これはz-indexと同じではありません。