在 Safari 中破坏大小图像的 Flexbox

Posted 2023-03-05

【中文标题】在 Safari 中破坏大小图像的 Flexbox

【英文标题】：Flexbox with sized images broken in Safari

【发布时间】：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

破碎的布局：

【参考方案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