挪动端优先选择的flex3栏合理布局的应用方式

2020-10-30 04:37 jianzhan

默认设置状况下先显示信息挪动端,根据 @media 特性兼容显示屏转变

应用flexbox有关的CSS特性

  1. display: flex; (父元素)
  2. flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超过该怎样显示信息)
  3. flex: flex-grow flex-shrink flex-basis; (子元素, 子元素该怎样分派室内空间)
  4. order: number; (子元素, 子元素的次序该怎样排序)

关键

  1. 在父元素上设定 display: flex 和 flex-wrap: wrap
  2. 根据 flex 来调剂子元素上的室内空间分派(拓展、收拢占比和伸缩标准值)
  3. 根据 order 来调剂子元素的显示信息次序(把 .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 的1种新的合理布局方式。

        CSS3 延展性盒( Flexible Box 或 flexbox),是1种当网页页面必须融入不一样的显示屏尺寸和机器设备种类时保证元素有着适当的个人行为的合理布局方法。
        引进延展性盒合理布局实体模型的目地是出示1种更为合理的方法来对1个器皿中的子元素开展排序、对齐和分派空白室内空间。
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。