ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 を使用して柔軟なボックスレイアウトを実装する方法

CSS3 を使用して柔軟なボックスレイアウトを実装する方法

坏嘻嘻オリジナル: 2018-09-26 11:50:364798ブラウズ

従来のレイアウトスキームは、フロート、表示、位置のボックスモデルに基づいています。開発言語の改良により、柔軟なボックスレイアウトモデルは、従来の複雑さを放棄したため、Web 開発者のツールボックスの優れたツールになりました。この設定は、ページの互換性に関する開発者の要件を完全に満たすことができます。つまり、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合でも、要素が適切に動作することを保証できます。この記事では、フレキシブルボックスレイアウトを簡単に使用する方法について説明します。必要な方は参考にしてください。

フレキシブルボックスの理解

フレキシブルボックスは、フレキシブルコンテナ（Flexコンテナ）とフレキシブルサブフレームで構成されています。 element (Flex item) を使用し、表示属性の値を flex または inline-flex に設定することで、フレキシブルコンテナをフレキシブルコンテナとして定義できます。フレキシブルコンテナには 1 つ以上のフレキシブルサブ要素を含めることができます。

従来のボックスモデルは、垂直方向の中央揃えやサブ要素のソートの実装など、特殊なページのレイアウトには非常に不便でした。しかし、w3c による flex レイアウトの導入により、さまざまなページレイアウトを簡単、完全、レスポンシブに実装できるようになり、開発プロセスが大幅に簡素化され、すべてのブラウザで flex レイアウトがサポートされるようになりました。

Elastic Example box

例 1: 従来モデル

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 450px;
            height: 150px;
            background-color: darkcyan;
                     }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
                 }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

構造は図のとおりです

CSS3 を使用して柔軟なボックスレイアウトを実装する方法

#例 2: サブ要素の並べ替え

<style> 
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 450px;
            background-color: darkcyan;
            flex-direction: row-reverse;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

構造は図に示すとおりです

CSS3 を使用して柔軟なボックスレイアウトを実装する方法

#例 3: ボックスが中央に表示される

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 500px;
            background-color: darkcyan;
            justify-content: center;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

構造は図のとおりです

CSS3 を使用して柔軟なボックスレイアウトを実装する方法

#例 4: 下から表示

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 500px;
            height: 211px;
            background-color: darkcyan;
            align-items: flex-end;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

## 構造は次のとおりです

# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上がCSS3 を使用して柔軟なボックスレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS フロートとドキュメントフローの関係の詳細な図による説明次の記事：CSS フロートとドキュメントフローの関係の詳細な図による説明

続きを見る

CSS3 を使用して柔軟なボックス レイアウトを実装する方法

関連記事

CSS3 を使用して柔軟なボックスレイアウトを実装する方法