Flexbox 项目不会在 Safari 10（桌面）中并排显示

Question

小提琴是here。

<profile-summary> 元素应该是相邻的

适用于 Chrome、FF、IE11+。但 Safari 10 不会这样做。

我该如何解决这个问题？

Answer 1

似乎是因为profile-summary { flex-basis: 100%; ... }，它将元素的初始大小设置为100%宽度。这似乎适用于您的max-width 声明，通过视觉上限制宽度，但仍将 flex 项目放在 safari 中自己的行上，而不是在其他浏览器中。

更好的方法是删除flex-basis 并设置flex-grow: 1。这似乎与 max-width 配合得很好，并将 flex 项留在 safari/chrome/ff 中的同一行。

search-profiles-page {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
}

search-profiles-page .xui-profile-search-results {
  margin-left: 0;
  flex: .75;
  flex-grow: 1;
}

search-profiles-page .xui-profile-search-results {
  margin-left: 0;
  flex: .75;
  flex-grow: 1;
}

search-profiles-page .xui-profile-search-results {
  margin: 0 -15px;
  display: block;
  background: #f7fafa;
}

profile-summaries {
  display: block;
}

search-profiles-page .xui-profile-search-results profile-summaries .list {
  padding: 15px;
}

profile-summaries .profiles-container {
  display: flex;
  flex-wrap: wrap;
}

search-profiles-page .xui-profile-search-results profile-summaries .list profile-summary {
  margin-top: 30px;
  max-width: calc(30% - 15px);
}

profile-summary {
  /*flex-basis: 100%;*/
  flex-grow: 1;
  padding: 15px;
  border: 1px solid #ccc;
  margin-top: 15px;
  list-style-type: none;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

<search-profiles-page>
  <div class="xui-profile-search-results">
    <profile-summaries>
      <div class="list">
        <profile-modals>
          <div class="profiles-container">
            <profile-summary>
              <div class="profile-header">
                blahblah
              </div>
              <div class="body">
                blahblah
              </div>
            </profile-summary>
            <profile-summary>
              <div class="profile-header">
                blahblah
              </div>
              <div class="body">
                blahblah
              </div>
            </profile-summary>
          </div>
        </profile-modals>
      </div>
    </profile-summaries>
  </div>
</search-profiles-page>

您也可以只使用width: 100% 而不是flex-grow: 1，它的行为方式相同，但我认为如果可以的话最好使用弹性属性，flex-grow 似乎工作得很好。

search-profiles-page {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
}
search-profiles-page .xui-profile-search-results {
  margin-left: 0;
  flex: .75;
  flex-grow: 1;
}
search-profiles-page .xui-profile-search-results {
  margin-left: 0;
  flex: .75;
  flex-grow: 1;
}
search-profiles-page .xui-profile-search-results {
  margin: 0 -15px;
  display: block;
 background: #f7fafa;
}
profile-summaries {
  display: block;
}
search-profiles-page .xui-profile-search-results profile-summaries .list {
  padding: 15px;
}
profile-summaries .profiles-container {
  display: flex;
  flex-wrap: wrap;
}
search-profiles-page .xui-profile-search-results profile-summaries .list profile-summary {
  margin-top: 30px;
  max-width: calc(30% - 15px);
}
profile-summary {
  /*flex-basis: 100%;*/
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  margin-top: 15px;
  list-style-type: none;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

  <search-profiles-page>
    <div class="xui-profile-search-results">
       <profile-summaries>
          <div class="list">
             <profile-modals>
                <div class="profiles-container">
                   <profile-summary>
                      <div class="profile-header">
                         blahblah
                      </div>
                      <div class="body">
                         blahblah
                      </div>
                   </profile-summary>
                   <profile-summary>
                      <div class="profile-header">
                         blahblah
                      </div>
                      <div class="body">
                         blahblah
                      </div>
                   </profile-summary>
                </div>
             </profile-modals>
          </div>
       </profile-summaries>
    </div>
  </search-profiles-page>

Answer 2

只需将flex: 1; 添加到您的profile-summary，它应该可以在所有浏览器上正常工作。

根据W3 article，

flex：正数

等价于 flex: positive-number 1 0. 使弹性项目 灵活并将弹性基础设置为零，从而产生一个项目 在 flex 中接收指定比例的可用空间 容器。如果 flex 容器中的所有项目都使用这种模式，它们的 尺寸将与指定的弹性系数成正比。

换句话说，flex: 1的意思是，

flex-grow : 1; // this means that the div will grow in same proportion as the window-size
flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size 
flex-basis : 0; // this means that the div does not have a starting value as such and will take up screen as per the screen size available for.e.g:- if 3 divs are in the wrapper then each div will take 33%.

参考代码：

search-profiles-page {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
}

search-profiles-page .xui-profile-search-results {
  margin-left: 0;
  flex: .75;
  flex-grow: 1;
}

search-profiles-page .xui-profile-search-results {
  margin-left: 0;
  flex: .75;
  flex-grow: 1;
}

search-profiles-page .xui-profile-search-results {
  margin: 0 -15px;
  display: block;
  background: #f7fafa;
}

profile-summaries {
  display: block;
}

search-profiles-page .xui-profile-search-results profile-summaries .list {
  padding: 15px;
}

profile-summaries .profiles-container {
  display: flex;
  flex-wrap: wrap;
}

search-profiles-page .xui-profile-search-results profile-summaries .list profile-summary {
  margin-top: 30px;
  max-width: calc(30% - 15px);
}

profile-summary {
  padding: 15px;
  border: 1px solid #ccc;
  margin-top: 15px;
  list-style-type: none;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

<search-profiles-page>
  <div class="xui-profile-search-results">
    <profile-summaries>
      <div class="list">
        <profile-modals>
          <div class="profiles-container">
            <profile-summary>
              <div class="profile-header">
                blahblah
              </div>
              <div class="body">
                blahblah
              </div>
            </profile-summary>
            <profile-summary>
              <div class="profile-header">
                blahblah
              </div>
              <div class="body">
                blahblah
              </div>
            </profile-summary>
          </div>
        </profile-modals>
      </div>
    </profile-summaries>
  </div>
</search-profiles-page>