在 Macbook 上的 Safari 8.0.8 中。
我正在使用 flexbox
将元素分布在类似网格的容器中。
我的 .eventContainer
是多个 .event
框的父级,这些框应该由 flexbox 分布在各行中。它在 Firefox 和 Chrome 中运行良好,但 Safari 将事件显示在他们自己的行上,而不是彼此相邻!
<div class="eventContainer">
<div class="event">
<div class="thumb">
<img src="http://imgur.com/JDxjEknb.jpg">
</div>
<p class="thumbDate">Fri 18 Sept</p>
<p class="thumbArtist">Event 1</p>
<p class="thumbTitle">Subtitle 1</p>
<p class="thumbLocation">Location</p>
</div>
<div class="event">
<div class="thumb">
<img src="http://imgur.com/AwA5ga7b.jpg">
</div>
<p class="thumbDate">Sat 19 Sept</p>
<p class="thumbArtist">Event 2</p>
<p class="thumbTitle">Title 2</p>
<p class="thumbLocation">Subtitle 2</p>
</div>
<div class="event">
<div class="thumb">
<img src="http://imgur.com/9z5NkBxb.jpg">
</div>
<p class="thumbDate">Sat 19 Sept</p>
<p class="thumbArtist">Event 3</p>
<p class="thumbTitle">Title 3</p>
<p class="thumbLocation">Subtitle 3</p>
</div>
<!-- Fix for FlexBox -->
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
CSS:
.eventContainer {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.event {
display: inline-block;
margin-bottom: 35px;
width: 100%;
max-width: 200px;
margin-right: 15px;
cursor: pointer;
}
我在这里错过了什么?
JSFiddle 示例:http://jsfiddle.net/foepzgf8/1/
可以在 Chrome 和 Safari 中尝试一下,看看我的意思。
最佳答案
在这种情况下实际上不是justify-content
。当您遇到 flexbox 的问题时,最好返回并定义 flex-grow
、flex-shrink
和 flex-basis
flexbox 容器的 child 。
如果将此添加到 .event
,您的问题将得到解决:
-webkit-flex: 1 0 200px;
flex: 1 0 200px;
更新 fiddle :http://jsfiddle.net/foepzgf8/5/
关于html - Safari 8 : Flexbox's "justify-content" isn't working at all,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32623653/