Introduction aux connaissances pertinentes sur la disposition flexible à trois colonnes sur le terminal mobile (exemple de code)

Ce que cet article vous apporte, c'est l'introduction de connaissances pertinentes (exemples de code) sur la disposition flexible à trois colonnes sur le terminal mobile. J'espère que ce sera le cas. utile pour vous.

Par défaut, la version mobile s'affiche en premier, et les changements d'écran sont adaptés via l'attribut @media

Utiliser les attributs CSS liés à flexbox

1. display: flex; (élément parent)

2. flex-wrap: nowrap | wrap-reverse;

3. flex : flex-grow flex-shrink flex-basis ; (éléments enfants, comment allouer de l'espace pour les éléments enfants)

4. commande : nombre ; (éléments enfants, Comment organiser l'ordre des éléments enfants)

Points clés

1. Définir affichage : flex et flex-wrap: wrap

2. Utilisez

   flex pour ajuster l'allocation d'espace (expansion, taux de retrait et base de mise à l'échelle value) sur les éléments enfants

3. Ajustez l'ordre d'affichage des éléments enfants via

   order (mettez .center au milieu)

Exemple

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!