-webkit-box 与 -webkit-flex 的差异

来源:互联网 发布:淘宝交易成功申请退款 编辑:程序博客网 时间:2024/05/03 06:42

-webkit-box  应该是 -webkit-flex 的旧写法

使用-webkit-box 的时候   -webkit-flex-wrap 属性不生效,必须使用-webkit-flex

正确的css覆盖 顺序是

  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .Container {

            display: flex;

            display: -webkit-flex;

            background-color: gray;

            -webkit-box-pack: justify;

            width: 100%;

            -webkit-flex-wrap: wrap-reverse;

            -webkit-box-orient: horizontal;

            height: 200px;


        }


        .blue {

            border: 1px solid red;

            min-width: 100px;

            -webkit-box-flex: 1;

            margin: 10px;

            background-color: blue;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

</div>

</body>

</html>

0 0