ios - Flexbox 和 safari

Question

所以我遇到了 safari 的问题。似乎在 ios 和 macs 中 flexbox 都不适合我，尽管它应该。

当我在 ios 上查看时，框内联显示，尽管它们应该显示为 block 。

当我在桌面 (PC) 上的 safari 中查看它时，它显示为 block ，但它应该是内联的。

它在 chrome 中完美运行。

这是 HTML:

            <div class="flex-parent" style="margin:10px;margin-top: 30px;padding: 15px;border: 2px solid #EEEEEE;">
            <div style="width: 100%;"><h2><span style="font-weight: bold; color: rgba(1, 61, 121, 1); text-align:center;">Why?</span></h2></div>
            <div class="flex-2"><ul class="front-page-list" style="list-style-type:none;margin-top:-20px;">
                <li>
            <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">Because flexbox is new</span></h3>
            </li>
                <li>
            <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">Apple likes to make everyone work around them</span></h3>
            </li>
                <li>
            <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">There are too many versions of ios</span></h3>
            </li>
                <li>
            <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">I'm not very good at this yet</span></h3>
            </li>
                <li>
            <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">Etc.</span></h3>
            </li>
                <li>
            <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">Etc.</span></h3>
            </li>
            </ul></div><div class="flex-2">
            <img src="http://domain.com/wp-content/uploads/2015/07/e1441825407759.jpg"  height="100%" class="alignleft size-full wp-image-422" />
            </div></div>

这是 CSS:

            .flex-parent{
                display: flex;
                flex-wrap: wrap;
                max-width: 1100px;
                align-items: center;
                justify-content: center;
                align-content: stretch;

            }

            .flex-2{
                width:40%;
                min-width: 400px;
                flex-grow: 1;
                margin:2%;
                padding: 0;
            }

随着我变得越来越沮丧和绝望，它变成了这样:

            .flex-parent{
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction:row;
                flex-direction: row;
                -webkit-flex-wrap: wrap;
                flex-wrap: wrap;
                max-width: 1000px;
                -webkit-align-items: center;
                align-items: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-content: stretch;
                align-content: stretch;

            }


            @media screen and (max-width: 600){
            .flex-parent{
            display: block;
            }
            .flex-2{
            width: 100%;
            display: block;
            }

            }
            .flex-2{
                display: -webkit-box;
                display: -webkit-flex-box;
                -webkit-box-flex: 1;
            -webkit-box-sizing: border-box;
                width:40%;
                min-width: 300px;
                -webkit-flex: 1;
                flex-grow: 1;
                margin:1%;
                padding: 0;
            }

这些都不起作用……如果有的话我离得更远了。除了在 change.org 上发起请愿，让过时的浏览器成为非法，我不知道还能做什么。

Answer 1

只需为每个 flex 属性使用 webkit 处理程序。无需添加任何其他内容。请参阅下面的笔和相应的代码。在 Safari 中为我工作(布局与 Chrome 中的布局相同)。 http://codepen.io/anon/pen/gaMzqr?editors=110

.flex-parent {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   max-width: 1100px;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-align-content: stretch;
   align-content: stretch;
 }

 .flex-2 {
   width: 40%;
   min-width: 400px;
   -webkit-flex-grow: 1;
   flex-grow: 1;
   margin: 2%;
   padding: 0;
 }