html - flex-wrap 在 Safari 中不起作用并且向左浮动不是一个选项

Question

我有一个设置，我试图让一个 div 在屏幕上居中，但 div 内的图像基于父 div 的宽度 flex-wrap。

这适用于除 Safari 之外的所有浏览器。
向左飘浮;由于居中问题，将无法工作。我有一个 fiddle 场景分解......

http://jsfiddle.net/6f59t7qh/2/

<div class="gallery">
    <div class="galleryBlock">
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
    </div>
</div>

.gallery {
    text-align: center;
    background-color: green;
}

.galleryBlock {
    width: 585px;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-wrap: wrap; /* flex-wrap not working in Safari*/
    background-color: red;
}
.galleryTile {
    position: relative;
    height: 100px;
    width: 190px;
    overflow: hidden;
    margin: 0 5px 5px 0;
}

任何想法都会很棒!谢谢。

Answer 1

检查这个:
center a block and set its children flex

1.您应该始终以百分比的 px 为单位设置图像的大小。如果它是灵活的

width: 100%;
height: 100%;

因此图像可以随着其父级的大小而改变。

2.只用这两个就可以设置一个 block 的水平居中。 text-align 在这种情况下不合适。

margin-left: auto;
margin-right: auto;

3.设置.galleryBlock

display: -webkit-flex; /* Safari */
display: flex;

并设置 .galleryTile

-webkit-flex: 1;  /* Safari 6.1+ */
-ms-flex: 1;  /* IE 10 */    
flex: 1;

这是 flex tutorial in W3C