Safari 8：Flexbox的“证明内容”根本不工作 [英] Safari 8: Flexbox's "justify-content" isn't working at all

问题描述

我使用 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> 5月18日< / p> 
< p class =thumbArtist>事件1< / p> 
< p class =thumbTitle>小标题1< / p> 
< p class =thumbLocation>位置< / p> 
< / div> 
< div class =event> 
< div class =thumb> 
< img src =http://imgur.com/AwA5ga7b.jpg> 
< / div> 
< p class =thumbDate> 9月19日星期六< / p> 
< p class =thumbArtist>事件2< / p> 
< p class =thumbTitle>标题2< / p> 
< p class =thumbLocation>小标题2< / p> 
< / div> 
< div class =event> 
< div class =thumb> 
< img src =http://imgur.com/9z5NkBxb.jpg> 
< / div> 
< p class =thumbDate> 9月19日星期六< / p> 
< p class =thumbArtist>事件3< / p> 
< p class =thumbTitle>标题3< / p> 
< p class =thumbLocation>小标题3< / p> 
< / div> 
<！ - 修复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; 
宽度：100％; 
最大宽度：200px; 
 margin-right：15px; 
 cursor：pointer; 
 
 $ / code> 

我在这里错过了什么？



JSFiddle示例： http://jsfiddle.net/foepzgf8/1 /

可以在Chrome和Safari浏览器中试用，看看我的意思。

解决方案

在这种情况下，实际上并不是 justify-content 。当遇到flexbox问题时，返回并定义 flex-grow ， flex-shrink 总是件好事，和flexbox容器的子元素 flex-basis 。

如果您将此添加到 .event ，您的问题将得到解决：

  -webkit-flex：1 0 200px; 
 flex：1 0 200px; 
  

更新的小提琴： http://jsfiddle.net/foepzgf8/5/

In Safari 8.0.8 on Macbook.

I'm using flexbox to distribute elements in a grid-like container.

My .eventContainer is parent to multiple .event boxes which should be distributed across the rows by flexbox. It works fine in Firefox and Chrome but Safari displays the events on their own line, rather than next to each other!

<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;
}

What have I missed here?

JSFiddle Example: http://jsfiddle.net/foepzgf8/1/

Can try it in both Chrome and Safari and see what I mean.

解决方案

It's actually not justify-content in this situation. When you run into issues with flexbox, it's always good to go back and define flex-grow, flex-shrink, and flex-basis on the children of the flexbox container.

If you add this to .event your issue will be resolved:

-webkit-flex: 1 0 200px;
flex: 1 0 200px;

Updated fiddle: http://jsfiddle.net/foepzgf8/5/

这篇关于Safari 8：Flexbox的“证明内容”根本不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！