CSS3 アダプティブ レイアウト テクノロジー 柔軟なサイズ

グリッド レイアウトは、優れたアダプティブ レイアウト テクノロジであるフレキシブル サイズ (フレックス サイズ) をサポートしています。

柔軟なサイズ設定では、fr サイズ単位を使用します。これは、「分数」または「小数単位」という単語の最初の 2 文字に由来し、全体のスペースの一部を表します。

たとえば、次の CSS ルール:

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

は 4 つの列があることを意味し、最初の列は 100px の固定サイズ、3 列目の max-content はオーバーフローや折り返しのない要素のみを含むサイズを意味し、残りの 2 列は要素を含むサイズを意味します。列はすべて柔軟なサイズです。

弾性サイズの計算ルールに従って、2 つは残りの利用可能なスペースを均等に分割します (これら 2 つの列の弾性係数は等しく、両方とも 1)。

CSS3 デモ コード:

#grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
}
#title {
    background-color: lime;
}
#score {
    background-color: yellow;
}
#stats {
    background-color: lime;
}
#message {
    background-color: orange;
}
p {
    height: 80px;
    line-height: 80px;
    text-align: center;
}

HTML コード:

<p id="grid">
    <p id="title">Site Logo</p>
    <p id="score">Slogan</p>
    <p id="stats">User Zone</p>
    <p id="message">Message</p>
</p>

関連推奨事項:

柔軟なレイアウトの詳細な説明

柔軟なレイアウト

css3 柔軟なレイアウト

以上がCSS3 アダプティブ レイアウト テクノロジー 柔軟なサイズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。