Introduction to relevant knowledge of flex three-column layout on the mobile terminal (code example)

The content of this article is an introduction to the relevant knowledge (code examples) about the flex three-column layout on the mobile terminal. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

By default, the mobile terminal is displayed first, and the screen changes are adapted through the @media attribute.

Use flexbox-related CSS properties

1. display: flex; (parent element)

2. ##flex-wrap: nowrap | wrap | wrap-reverse; (How to display when the parent element and child elements exceed the limit)

3. flex: flex-grow flex-shrink flex-basis; (child elements, how to allocate space for child elements)

4. order: number; (child elements, How to arrange the order of child elements)

Key points

1. Set on the parent element

   display: flex and flex-wrap: wrap

2. Use

   flex to adjust the space allocation on child elements (expansion, shrinkage ratio and scaling base value)

3. Adjust the display order of child elements through

   order (put .center in the middle)

Example

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>

The above is the detailed content of Introduction to relevant knowledge of flex three-column layout on the mobile terminal (code example). For more information, please follow other related articles on the PHP Chinese website!