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中的同一行。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将flex: 1;添加到profile-summary，它就可以在所有浏览器上正常使用。

根据W3 article，

  

flex：正数

     

相当于flex：正数 1 0.制作弹性项目   灵活并将flex基础设置为零，从而产生一个项目   接收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>