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

零到壹度
リリース: 2018-03-24 11:03:24
オリジナル
2174 人が閲覧しました

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

柔軟なサイズ設定では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート