在 Safari 中破坏大小图像的 Flexbox答案

【问题标题】：Flexbox with sized images broken in Safari在 Safari 中破坏大小图像的 Flexbox
【发布时间】：2016-10-14 13:35:29
【问题描述】：

我在 Chrome 和 Firefox 中使用了以下布局，但在 Safari 中它被破坏了。

.grid {
  max-width: 1280px;
  margin: 0 auto;
  background-color: red;
}
.block {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.block .meta {
  background-color: blue;
  margin: 0 60px 0 0;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.block .thumbnail {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.block img {
  width: 100%;
  height: auto;
  display: block;
}
.block:nth-child(even) .meta {
  margin: 0 0 0 60px;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.block:nth-child(even) .thumbnail {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

<div class="grid">
  <div class="block">
    <div class="meta">
      IPhone umami salvia polaroid asymmetrical. Kogi master cleanse 90's beard put a bird on it williamsburg. Trust fund biodiesel intelligentsia, wolf keytar actually polaroid. Kombucha XOXO artisan, echo park
    </div>
    <div class="thumbnail">
      <img style="width: 800px;" src="http://funkhaus.us/wp-content/uploads/Toys.jpg">
    </div>
  </div>
  <div class="block">
    <div class="meta">
      IPhone umami salvia polaroid asymmetrical. Kogi master cleanse 90's beard put a bird on it williamsburg. Trust fund biodiesel intelligentsia, wolf keytar actually polaroid. Kombucha XOXO artisan, echo park
    </div>
    <div class="thumbnail">
      <img style="width: 800px;" src="http://funkhaus.us/wp-content/uploads/Toys.jpg">
    </div>
  </div>
</div>

http://codepen.io/drewbaker/pen/zBqjNy?editors=1100

破碎的布局：

【问题讨论】：

标签： html css safari flexbox

【解决方案1】：

看起来又是一个恼人的浏览器不一致问题。

解决方案似乎是从图像容器中删除flex-shrink: 1。

而不是这个：

.block .thumbnail {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
}

试试这个：

.block .thumbnail {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
}

在 Chrome、FF、IE11 和 Safari 中测试。

Revised Pen

【讨论】：