モバイル端末のフレックス 3 列レイアウトに関する関連知識の紹介 (コード例)

この記事の内容は、モバイル端末におけるフレックス3カラムレイアウトに関する知識(コード例)の紹介です。お困りの方は参考にしていただければ幸いです。あなたに役立ちます。

デフォルトでは、モバイル端末が最初に表示され、画面の変更は @media 属性を通じて調整されます。

フレックスボックス関連の CSS プロパティを使用します。

##display: flex (親要素)

1. ##flex-wrap: Wrap-reverse;制限を超えています)

2. flex: flex-grow flex-shrink flex-basis; (子要素、子要素にスペースを割り当てる方法)

3. order:number; (子要素、子要素の順序を並べる方法)

4. 重要なポイント

親要素に設定します

display: flex
1. および

   flex-wrap: Wrap

flex
2. を使用して、子要素のスペース割り当てを調整します (
   子要素の表示順序を
order
3. で調整します (

   .center を真ん中に置きます)

   例

CSS

    .box {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .center {
        background-color: #f00;
        flex: 100% 1;
    }
    .left, .right {
        flex: 100% 1;
    }
    .left {
        background-color: #0f0;
    }
    .right {
        background-color: #00f;
    }
    @media all and (min-width: 400px) {
        .left, .right {
            flex: 50% 1;
        }
    }
    @media all and (min-width: 800px) {
        .box {
            flex-wrap: nowrap;
        }
        .center {
            order: 2;
            flex: 1;
        }
        .left, .right {
            flex: 0 0 300px;
        }
        .left {
            order: 1;
        }
        .right {
            order: 3;
        }
    }

HTML

<div class="box">
    <div class="center">
        弹性盒子是 CSS3 的一种新的布局模式。
        CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
        引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

以上がモバイル端末のフレックス 3 列レイアウトに関する関連知識の紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。