CSSのエラスティックレイアウトとは何ですか-CSSチュートリアル-php.cn

CSSのエラスティックレイアウトとは何ですか

王林

リリース： 2020-11-16 11:08:03

オリジナル

4090 人が閲覧しました

CSS のフレキシブルレイアウトは、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作するようにするレイアウト方法です。柔軟なレイアウトモデルを導入する目的は、コンテナの子要素に空白を配置、位置合わせ、割り当てるためのより効率的な方法を提供することです。

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 サイトの他の関連記事を参照してください。