挪移端的flex三栏布局的相干见识介绍（代码示例）

?本篇文章给大家带来的内容是对于挪移端的flex三栏布局的相干见识介绍（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于挪移端的flex三栏布局的相干见识介绍（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

默许状况下先显示挪移端，通过 @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

    
        弹性盒子是 CSS3 的一种新的布局模式。
        CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要顺应不一样的屏幕大小以及设施类型时确保元素具有适当的行为的布局方式。
        引入弹性盒布局模型的目的是供给一种更加有效的方式来对一个容器中的子元素进行罗列、对齐和分配空白空间。
    
    left
    right

以上就是挪移端的flex三栏布局的相干见识介绍（代码示例）的细致内容，更多请关注 百分百源码网 其它相干文章！