使用 flexbox 的网站在 IOS 上不起作用

debugcn 发表于 Dev

斯图尔特·麦克

我正在使用 HTML5 和 flexbox 模型创建一个简单的网站，该模型适用于大多数浏览器，但在 IOS（使用 iphone 7 plus）和一些较旧的 android 手机上已损坏。

我已经把一个代码笔放在一起来演示使用代码笔“跨浏览器测试”时会复制的问题。图像不显示，但占位符正确。我还将在这篇文章中包含 HTML 和 CSS [LESS] 代码。

http://codepen.io/stuartmc77/pen/PpjKmY

我已经添加了所有我能想到并从其他各种帖子中找到的跨浏览器前缀，但似乎没有修复它。

我对 flexbox 模型很陌生，所以任何和所有帮助都得到了认可。

[HTML]

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>MyPage</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <div>

        <header>
            <div class="leftHeaderText">MY&nbsp;WEB</div>
            <div class="headerImage"><img src="/Images/alogo.png" /></div>
            <div class="rightHeaderText">PAGE</div>
        </header>

        <nav>
            <div id="burgerMenu">
                <div></div>
                <div></div>
                <div></div>
            </div>

            <ul id="menuBar">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Parent 1</a>
                    <ul>
                        <li>
                            <a href="#">Sub Item 1</a>
                            <ul>
                                <li><a href="#">Sub Sub Item1</a></li>
                                <li><a href="#">Sub Sub Item2</a></li>
                                <li><a href="#">Sub Sub Item3</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Sub Item 2</a>
                            <ul>
                                <li><a href="#">Sub Sub Item1</a></li>
                                <li><a href="#">Sub Sub Item2</a></li>
                                <li><a href="#">Sub Sub Item3</a></li>
                                <li><a href="#">Sub Sub Item4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Item 3</a></li>
                        <li><a href="#">Sub Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Parent 2</a></li>
                <li><a href="#">Parent 3</a></li>
            </ul>
        </nav>

        <main>


<div class="heroBanner">
    <p>
        Welcome to the new website.<br />
        <br />
        Soon you will be able to do stuff here<br />
        You'll be able to do this and that.<br />
        There will also be a thingymabob<br />
        <br />
        Check back soon.
    </p>
</div>



<div class="vmContainer">
    <div class="vmItem">
        <div class="header">Item1</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 2</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 3</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 4</div>
        <div class="item"></div>
    </div>
</div>
        </main>

        <footer>
            <ul>
                <li>Copyright &copy; 2017</li>
                <li>Contact Us</li>
                <li><a href="#" target="_blank"><img src="/Images/FB-f-Logo__white_29.png" /></a></li>
                <li><div class="fb-like" data-href="https://www.facebook.com/#" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div></li>
            </ul>
        </footer>
    </div>

    <script src="/bundles/jquery?v=JzhfglzUfmVF2qo-weTo-kvXJ9AJvIRBLmu11PgpbVY1"></script>



    <script type="text/javascript">
        $(document).ready(function () {
            $('#burgerMenu').on('click', function () {
                var mb = $('#menuBar');
                if ($(mb).height() == 0)
                    $(mb).height('100%');
                else
                    $(mb).height(0);
            })
        })
    </script>
</body>
</html>

[CSS(少)]

@primaryTextColour: #123456;
@linkHoverColour: #ff6a00;
@htmlBG: #000;
@primaryBGColour: #fff;
@headerTextColour: #000;
@primaryBorderColour: #123456;
@pageBorderSize: 30px;
@menuHoverBGColour: #dcefff;


html {
    background-color: @htmlBG;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: @htmlBG;
    color: @primaryTextColour;
    margin: 0;
    font-family: Moon;
    height: 100%;
}

body > div {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    max-width: 80%;
    min-width: 730px;
    margin: auto;
    min-height: 100vh;
    background-color: @primaryBGColour;

    header {
        -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
        -ms-flex-order: 1; /* TWEENER - IE 10 */
        -webkit-flex-order: 1;
        order: 1;
        -ms-flex: 0 1 100%;
        -webkit-flex: 0 1 100%;
        flex: 0 1 100%;
        font-weight: bold;
        font-size: 3em;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        //display: none;
        .headerImage {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
            -ms-flex-order: 2; /* TWEENER - IE 10 */
            order: 2;

            img {
                background: url(/Images/mcmlogo.png);
                background-size: 200px 200px;
                width: 200px;
                height: 200px;
                border: 0 none #000;
            }
        }

        .leftHeaderText {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
            -ms-flex-order: 1; /* TWEENER - IE 10 */
            -webkit-flex-order: 1;
            order: 1;
        }

        .rightHeaderText {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
            -ms-flex-order: 3; /* TWEENER - IE 10 */
            -webkit-flex-order: 3;
            order: 3;
        }
    }

    main {
        -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
        -ms-flex-order: 3; /* TWEENER - IE 10 */
        -webkit-flex-order: 3;
        order: 3;
        -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        padding: 30px 0;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: stretch;
    }

    aside {
        -webkit-box-ordinal-group: 4; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 4; /* OLD - Firefox 19- */
        -ms-flex-order: 4; /* TWEENER - IE 10 */
        -webkit-flex-order: 4;
        order: 4;
        -ms-flex: 0 1 200px;
        -webkit-flex: 0 1 200px;
        flex: 0 1 200px;
    }

    footer {
        -webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 5; /* OLD - Firefox 19- */
        -ms-flex-order: 5; /* TWEENER - IE 10 */
        -webkit-flex-order: 5;
        order: 5;
        -ms-flex: 0 1 100%;
        -webkit-flex: 0 1 100%;
        flex: 0 1 100%;
        background-color: @primaryBorderColour;
        color: @linkHoverColour;
        font-weight: bold;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        height: 50px;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: stretch;

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            -ms-flex: 0 1 100%;
            -webkit-flex: 0 1 100%;
            flex: 0 1 100%;
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex;
            -ms-flex-flow: row nowrap;
            -webkit-flex-flow: row nowrap;
            flex-flow: row nowrap;
            justify-content: space-around;

            a, a:link, a:visited, a:focus, a:hover, a:active {
                -ms-flex: 0 1;
                -webkit-flex: 0 1;
                flex: 0 1;
                text-decoration: none;
                font-weight: bold;
                color: @linkHoverColour;
                white-space: nowrap;
            }

            li {
                -ms-flex: 0 1;
                -webkit-flex: 0 1;
                flex: 0 1;
                display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox; /* TWEENER - IE 10 */
                display: -webkit-flex; /* NEW - Chrome */
                display: flex;
                -ms-flex-flow: column nowrap;
                -webkit-flex-flow: column nowrap;
                flex-flow: column nowrap;
                justify-content: center;
            }
        }
    }

    @media screen and (max-width: 768px) {
        max-width: 100%;
        min-width: 320px;

        header {
            -ms-flex-flow: column;
            -webkit-flex-flow: column;
            flex-flow: column;
            justify-content: flex-start;
            align-items: center;
            font-size: 2em;

            .headerImage {
                -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
                -ms-flex-order: 1; /* TWEENER - IE 10 */
                -webkit-flex-order: 1;
                order: 1;

                img {
                    background-size: 150px 150px;
                    width: 150px;
                    height: 150px;
                }
            }

            .leftHeaderText {
                -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
                -ms-flex-order: 2; /* TWEENER - IE 10 */
                -webkit-flex-order: 2;
                order: 2;
            }

            .rightHeaderText {
                -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
                -ms-flex-order: 3; /* TWEENER - IE 10 */
                -webkit-flex-order: 3;
                order: 3;
            }
        }

        footer {
            height: unset;

            ul {
                -ms-flex-flow: column nowrap;
                -webkit-flex-flow: column nowrap;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: center;

                li {
                    padding: 5px;
                }
            }
        }
    }

    @media screen and (max-width: 320px) {
        header {
            -ms-flex-flow: row;
            -webkit-flex-flow: row;
            flex-flow: row;
            justify-content: space-around;
            align-items: center;
            font-size: 1.2em;

            .headerImage {
                -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
                -ms-flex-order: 2; /* TWEENER - IE 10 */
                -webkit-flex-order: 2;
                order: 2;

                img {
                    background-size: 75px 75px;
                    width: 75px;
                    height: 75px;
                }
            }

            .leftHeaderText {
                -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
                -ms-flex-order: 1; /* TWEENER - IE 10 */
                -webkit-flex-order: 1;
                order: 1;
            }

            .rightHeaderText {
                -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
                -ms-flex-order: 3; /* TWEENER - IE 10 */
                -webkit-flex-order: 3;
                order: 3;
            }
        }
    }
}


/* Hero Banner */

.heroContainer {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    background-color: @primaryBorderColour;
    height: 300px;

    button {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        margin: 10px;
        height: 50px;
        width: 50px;
        border: 3px solid black;
        background: transparent;
        font-weight: bold;
        font-size: 30px;
        border-radius: 25px 25px;
        opacity: .1;

        &:hover {
            opacity: .25;
        }
    }

    .heroLeftFader {
        -ms-flex: 0 1 25%;
        -webkit-flex: 0 1 25%;
        flex: 0 1 25%;
        background: linear-gradient(to left, transparent, lighten(@primaryBorderColour, 50));
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-start;
    }

    .heroRightFader {
        -ms-flex: 0 1 25%;
        -webkit-flex: 0 1 25%;
        flex: 0 1 25%;
        background: linear-gradient(to right, transparent, lighten(@primaryBorderColour, 50));
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-end;
    }
}

@media screen and (max-width: 768px) {
    .heroContainer {
        height: 175px;
    }
}

@media screen and (max-width: 320px) {
    .heroContainer {
        display: none;
    }
}

/* visual menu box */

.vmContainer {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    padding: 30px;

    .vmItem {
        -ms-flex: 0 1 auto;
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        width: 200px;
        height: 250px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
        border: 2px solid @primaryBorderColour;
        margin: 10px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .header {
            -ms-flex: 0 1 50px;
            -webkit-flex: 0 1 50px;
            flex: 0 1 50px;
            background-color: @primaryBorderColour;
            color: @linkHoverColour;
            font-weight: bold;
            font-size: 1.5em;
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex;
            -ms-flex-flow: row;
            -webkit-flex-flow: row;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
        }

        .item {
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            overflow: hidden;

            img {
                height: 100%;
                width: 100%;
            }
        }
    }
}

.heroBanner {
    -ms-flex: 0 1;
    -webkit-flex: 0 1;
    flex: 0 1;
    //position: absolute;
    color: @linkHoverColour;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}

body > div > nav {
    -ms-flex: 0 1 100%;
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
    -ms-flex-order: 2; /* TWEENER - IE 10 */
    -webkit-flex-order: 2;
    order: 2;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    border-top: 1px solid @primaryBorderColour;
    border-bottom: 1px solid @primaryBorderColour;

    #burgerMenu {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        padding: 7px;
        display: none;
        background-color: @primaryBorderColour;
        color: @linkHoverColour;
        font-weight: bold;


        div {
            width: 25px;
            height: 3px;
            background-color: @linkHoverColour;
            margin: 4px 0;
            border-radius: 10px 10px;
        }
    }

    #menuBar {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: stretch;
        padding: 0;
        margin: 0;
        overflow: hidden;

        a, a:link, a:visited, a:focus, a:hover, a:active {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            text-decoration: none;
            font-weight: bold;
            color: @primaryTextColour;
            white-space: nowrap;
        }

        li {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            list-style-type: none;
            -moz-transition: background-color ease-in .1s;
            -o-transition: background-color ease-in .1s;
            -webkit-transition: background-color ease-in .1s;
            transition: background-color ease-in .1s;
            padding: 5px;

            &:hover {
                background-color: @menuHoverBGColour;

                > a {
                    color: @linkHoverColour;
                }

                > ul {
                    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
                    display: -ms-flexbox; /* TWEENER - IE 10 */
                    display: -webkit-flex; /* NEW - Chrome */
                    display: flex;
                }
            }
        }

        ul {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            display: none;
            -ms-flex-flow: column nowrap;
            -webkit-flex-flow: column nowrap;
            flex-flow: column nowrap;
            position: absolute;
            justify-content: space-around;
            align-items: stretch;
            box-shadow: -3px 3px 5px rgba(0,0,0,.25);
            background-color: @primaryBGColour;
            -moz-animation: fadein .5s;
            -o-animation: fadein .5s;
            -webkit-animation: fadein .5s;
            animation: fadein .5s;
            padding: 0;

            ul {
                left: 50%;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    body > div > nav {
        #burgerMenu {
            display: block;
        }

        #menuBar {
            -ms-flex-flow: column nowrap;
            -webkit-flex-flow: column nowrap;
            flex-flow: column nowrap;
            justify-content: flex-start;
            height: 0;

            ul {
                position: relative;
                box-shadow: none;

                ul {
                    left: unset;
                }
            }
        }
    }
}

@media screen and (min-width: 769px) {
    body > div > nav {
        #menuBar {
            height: 100% !important;
        }
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

谢谢

杰克黄

你对 flex 的使用过度了；它被用于不需要它的区域，因此它会在浏览器中引起不必要的问题。

Flexbox 仅在相对较新的浏览器上受支持（IE10+，请参阅此链接了解所有浏览器兼容性），因此支持以下任何内容都是不可能的。另外，我认为您应该阅读速记“flex”的使用，因为在 Safari 的检查器中将其删除将解决您的许多布局问题。

这是了解 flex 工作原理的极好指南。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。