ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSのエラスティックレイアウトとは何ですか
CSSのエラスティックレイアウトとは何ですか
- 王林オリジナル
- 2020-11-16 11:08:034105ブラウズ
CSS のフレキシブル レイアウトは、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作するようにするレイアウト方法です。柔軟なレイアウト モデルを導入する目的は、コンテナの子要素に空白を配置、位置合わせ、割り当てるためのより効率的な方法を提供することです。
エラスティック レイアウトの概要:
フレキシブル ボックスは、CSS3 の新しいレイアウト モードです。
(学習ビデオ共有: css ビデオ チュートリアル )
CSS3 フレキシブル ボックス (フレキシブル ボックスまたはフレックスボックス) は、ページをさまざまな画面サイズに適応させる必要がある場合の方法です。 devices 型は、要素が適切な動作をするようにレイアウトされます。
フレキシブル ボックス レイアウト モデルを導入する目的は、コンテナ内のサブ要素に空きスペースを配置、整列、割り当てるためのより効率的な方法を提供することです。
フレキシブル ボックスの内容:
フレキシブル ボックスは、フレキシブル コンテナ (Flex コンテナ) とフレキシブル サブ要素 (Flex アイテム) で構成されます。
フレキシブル コンテナは、display プロパティの値を flex または inline-flex に設定することによって、フレキシブル コンテナとして定義されます。
フレキシブル コンテナには、1 つ以上のフレキシブル サブ要素が含まれています。
注: フレキシブル コンテナの外側とフレキシブル サブ要素の内側は通常どおりレンダリングされます。フレックス ボックスは、フレックス 子要素がフレックス コンテナ内でどのようにレイアウトされるかを定義するだけです。
フレキシブルサブ要素は通常、フレキシブルボックス内に 1 行で表示されます。デフォルトでは、コンテナーごとに 1 行のみが存在します。
次の要素は、左から右に一列に表示された弾性子要素を示しています
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div> </div>
</body>
</html>関連する推奨事項:CSS チュートリアル
以上がCSSのエラスティックレイアウトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。