max-width对多线Flexbox的孩子有什么影响？

时间：2016-05-29 02:59:37

标签： html css css3 flexbox

这是 Safari 与Chrome / FireFox / Opera之间的兼容性问题。

.grid {
  display: flex;                   /* establish flex container */
  flex-wrap: wrap;                 /* enable flex items to wrap */
}
.cell {
  flex: 0 0 calc(33.33% - 10px);   /* don't grow, don't shrink, width less margin */
  height: 50px;
  max-width: 50px; /* works only in Safari */
  margin: 5px;
  background-color: #999;
}
.cell:nth-child(3n) {
  background-color: #F00;
}
<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Safari输出

enter image description here

Chrome / FireFox / Opera输出

enter image description here

浏览器|版本
-------- | --------
Safari | 9.1（10601.5.17.4）
Chrome | 51.0.2704.63（64位）
FireFox | 46.0.1
歌剧| 37.0.2178.43

标准文档http://www.w3.org/TR/css-flexbox-1/没有说明除了横向以外，多线柔性框使用max-width。

参考：问题来自How do I create a 3x3 grid via CSS?

的讨论

1 个答案:

答案 0 :(得分：1)

这是Safari中的一个错误。

正如flexbugs repository：

中所述
  

Safari使用最小/最大宽度/高度声明来实际渲染弹性项目的大小，但在计算多行灵活容器的单行上应该有多少项时，它会忽略这些值。相反，它只是使用项目的弹性基础值，或者如果弹性基础设置为自动，则使用其宽度。

我发现使用最小/最大宽度/高度声明的弹性等效物可以起作用：

flexbugs文档还提供了一个解决方案：

  

避免此问题的唯一方法是确保将flex基础设置为始终介于（包括）最小和最大大小声明之间的值。如果使用最小或最大尺寸声明，请将弹性基础设置为该值的任何值，如果您同时使用最小和最大尺寸声明，请将弹性基础设置为该范围内某个值的值。这有时需要使用百分比值或媒体查询来涵盖所有可能的场景。

参考文献：

相关问题
最新问题