ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3フレックスボックスとは何ですか
CSS3フレックスボックスとは何ですか
- WBOYオリジナル
- 2021-12-22 11:57:571979ブラウズ
css3 では、フレキシブル ボックスは、ページをさまざまな画面サイズやデバイス タイプに適応させるためにスペースをより効果的に割り当てるレイアウト方法です。表示属性を使用してフレキシブル ボックスを定義できます。構文は「display:flex」または「display:inline-flex」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 フレキシブル ボックスとは
フレキシブル ボックスは、CSS3 の新しいレイアウト モードです。
CSS3 フレキシブル ボックス (フレキシブル ボックスまたはフレックスボックス) は、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作するようにするレイアウト方法です。
フレキシブル ボックス レイアウト モデルを導入する目的は、コンテナ内のサブ要素に空きスペースを配置、整列、割り当てるためのより効率的な方法を提供することです。
フレキシブル ボックスは、フレキシブル コンテナ (Flex コンテナ) とフレキシブル サブ要素 (Flex アイテム) で構成されます。
フレキシブル コンテナは、display プロパティの値を flex または inline-flex に設定することによって、フレキシブル コンテナとして定義されます。
フレキシブル コンテナには、1 つ以上のフレキシブル サブ要素が含まれています。
注: フレキシブル コンテナの外側とフレキシブル サブ要素の内側は通常どおりレンダリングされます。フレックス ボックスは、フレックス 子要素がフレックス コンテナ内でどのようにレイアウトされるかを定義するだけです。
フレキシブルサブ要素は通常、フレキシブルボックス内に 1 行で表示されます。デフォルトでは、コンテナーごとに 1 行のみが存在します。
次の要素は、左から右に一列に表示された弾性子要素を示しています。
例は次のとおりです。
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<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 ビデオ チュートリアル)
以上がCSS3フレックスボックスとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。