CSSでフレックスレイアウトする手順の説明（コード付き）

この記事の内容は CSS での flex elastic レイアウトの手順に関するものです (コード付き)。必要な方は参考にしていただければ幸いです。

html：

nbsp;html>

    
        <meta>
        <meta>
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .wrap{
                width: 300px;
                height: 300px;
                display: flex;
                flex-direction: row; /*默认主轴方向水平向右*/
                flex-direction: row-reverse;  /*可选主轴方向水平向左*/ 
                /* flex-direction: column; */  /*可选主轴方向垂直向下*/
                /* flex-direction: column-reverse; */ /*可选主轴方向垂直向上*/
                
                flex-wrap: wrap;  /*默认侧轴方向与主轴垂直方向向下或者右*/
                /* flex-wrap: wrap-reverse; */ /*可选侧轴方向与主轴垂直方向向上或者左*/
            }
            .wrap div{
                background: skyblue;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                border: bisque 1px solid;
            }
        </style>
    
    
        <div>
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    

ステップ 1: 最初に親コンテナの表示: flex を設定します。つまり、フレックス エラスティック レイアウトを使用します。

ステップ 2: 主軸の方向を設定します
①flex -direction: row; (デフォルトのパラメータ) 主軸の方向は水平右で、結果は次のようになります:

##②flex-direction: row-reverse; (オプションのパラメータ) 主軸の方向は水平方向の左で、結果は次の図のようになります。 ③flex-direction：column;（オプションパラメータ）主軸の方向は垂直下です、結果はあなた自身の想像で作成されます（主に長すぎるため/ニヤニヤ）

④flex-direction：column-reverse ; (オプションのパラメータ) 主軸の方向は垂直上向きです。理由は同じです。

ステップ 3: 側軸の方向を設定します。

①flex-wrap: Wrap;デフォルトの側軸の方向は下向きです。主軸に対して右垂直 結果は次の図のようになります。

##②flex-wrap:wrap-reverse; 側軸のオプションの方向は上向きまたは左垂直です。結果はブレーンストーミングです。

注: 側軸の方向は主軸に応じて変化し、主軸は常に側軸、つまり垂直方向に対して相対的になります。 2 つの軸のデフォルトは右と下です。

その他のプロパティ設定:

flex-flow:属性の場合、パラメータが 2 つの場合は主軸と側軸の方向、パラメータが 1 つの場合は 2 つのパラメータがスペースで区切られています。

order:number スケーラブルな項目。たとえば、サブコンテナに order: 1 を追加します。すべてのサブコンテナのデフォルトの順序は 0 です。最初のコンテナの順序を次のように設定します。 1、並べ替え効果に似たもの

##justify-content:flex-start(default)||flex-end||center||space-between ||スケーラブルなコンテナの周りのスペース

以上がCSSでフレックスレイアウトする手順の説明（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。