CSSグリッドレイアウトとフレックスレイアウトとは何ですか?

グリッドレイアウトとは、CSSでは「グリッドレイアウト」を指します。行と列の両方を扱うことができる2次元のシステムです。親要素と子要素にCSSルールを適用することで作成できます。グリッド レイアウトを使用します。フレックス レイアウトは、ボックス型モデルに最大限の柔軟性を提供するために使用される 1 次元システムである「弾性レイアウト」を指します。

#この記事の動作環境: Windows10 システム、css3、thinkpad t480 コンピューター。

(推奨チュートリアル:

CSS ビデオ チュートリアル )

1. フレックス レイアウトの概要

Flex はフレキシブル ボックス (伸縮性のあるボックス)レイアウト ) は、ボックス状のモデルに最大限の柔軟性を提供するように設計された 1 次元システムです。

使用法: 任意のコンテナ (インライン要素は display:inline-block に設定可能);

機能: スペースの分散は全体ではなく行内で実行されます

2. グリッド レイアウトの概要

Gird Layout (css グリッド レイアウト) は、CSS で最も強力なレイアウト システムであり、行と列を同時に処理できる 2 次元システムです。グリッド レイアウトを使用するために親要素 (グリッド コンテナー) とその要素の子要素 ​​(グリッド要素) に使用されます。

使用法: 親要素に dispay: Grid; Grid-template-colums および Grid-template-rows を設定して行数と列数を設定し、次に子が占める行数と列数を設定します。要素

特徴: 2 次元グリッド構造、操作が非常に簡単

実践的な戦闘 1: グリッド レイアウトを使用して単純な 9 マスのグリッドを作成します

html コード:

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

css コード:

.box{
    width: 1200px;
    height: 80vh;
    display: grid;  // 开启grid布局
    grid-template-columns: repeat(3,30%);   // 设置列
    grid-template-rows: repeat(3,30%);  // 设置行
    grid-column-gap: 20px; // 设置网格之间的间距
    grid-row-gap: 20px; // 设置网格之间的间距
}
.box div{
    background-color: #34ce57;
}

##演習 2: よく使用される Web サイトのレイアウトを作成する

#html コード:

<div class="box">
    <div class="header">header</div>
    <div class="content">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

css コード:

.box {
    width: 1200px;
    height: 80vh;
    display: grid; // 开启grid布局
    grid-template-rows: 10% 80% 10%;  // 设置行数
}
.header {
    background-color: #6ac13c;
    display: grid;
    /*居中*/
    align-content: center;
    justify-content: center;
}
.content {
    /*background-color: #f1b0b7;*/
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-gap: 20px;  // 网格之间的间隔
}
.footer {
    background-color: #ffc107;
    display: grid;
    align-items: center;
    justify-content: center;
}
.left {
    background-color: #5599FF;
}
.center {
    background-color: lightgreen;
}
.right {
    background-color: orchid;
}

プログラミング関連の知識については、プログラミング ビデオ

をご覧ください。 ！

以上がCSSグリッドレイアウトとフレックスレイアウトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。