Flexbox 不包含在 Firefox 和 IE11 中答案

【问题标题】：Flexbox not wrapping in Firefox and IE11Flexbox 不包含在 Firefox 和 IE11 中
【发布时间】：2016-05-01 18:58:56
【问题描述】：

我在 my website 上有一个 flexbox 网格，它在 IE11 和 Firefox 中显示不正确。

.section-home {
  float: left;
}
/*** Flex Grid ***/

.flex-grid {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.flex-grid .flex-item {
  display: flex;
  display: -webkit-flex;
  margin-top: 2rem;
}

<div class="section-home">
  <!-- PRODUCTS -->
  <div class="products-home flex-grid">
    <div class="flex-item">
      <div class="collection-item animated shown">
        <div class="collection-wrap">
          <div class="collection-image">
            <a href="{{ route('cuadrospersonalizados') }}">
              <img class="img-responsive" src="{{ FotImg::asset('img/fotolienzos.jpg') }}?dts={DPL_TS}" alt="Cuadros personalizados" title="Cuadros personalizados">
              <span class="description">
                        <p>Lienzo con tus fotos colocado sobre madera de pino</p>
                    </span>
              <div class="caption">
                <h2>Fotolienzos</h2>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-item">
      <div class="collection-item animated shown">
        <div class="collection-wrap">
          <div class="collection-image">
            <a href="{{ route('fotolienzosconreloj') }}">

              <img class="img-responsive" alt="Fotolienzos con Reloj" title="Fotolienzos con Reloj" src="{{ FotImg::asset('img/fotolienzos-con-reloj.jpg') }}?dts={DPL_TS}">

              <div class="label-new">
                <span class="new">novedad</span>
              </div>

              <span class="description">
                            <p>Lienzo personalizado con reloj colocado sobre bastidor de madera</p>
                        </span>

              <div class="caption">
                <h2>Fotolienzos con Reloj</h2>
              </div>

            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-item">
      <div class="collection-item animated shown">
        <div class="collection-wrap">
          <div class="collection-image">
            <a href="{{ route('posterspersonalizados') }}">
              <img class="img-responsive" alt="Pósters personalizados" title="Pósters personalizados" src="{{ FotImg::asset('img/posters-personalizados.jpg') }}?dts={DPL_TS}">
              <span class="description">
                        <p>Pósters especialmente pensados para habitaciones juveniles e infantiles</p>
                    </span>
              <div class="caption">
                <h2>Pósters personalizados</h2>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- PRODUCTS -->
</div>

弹性网格在 Chrome 中正确显示，但在 IE 和 Firefox 中，项目保持在一行并且不换行。这是为什么呢？

【问题讨论】：

我编辑了主帖
您是否添加了所有必需的供应商前缀？我在 FF 中看起来不错，但 IE 有一个滚动条。
是，但不起作用...在 IE11 中，在 Firefox 中，您必须将屏幕大小调整为 1200 像素或更小
@FunnyFrontend 我已经修改了您的代码，以便我们重现您的问题中的问题。请注意，该问题需要在问题本身中重现，仅链接到您的网站是不够的，因为如果问题得到解决，该问题对遇到相同问题的其他用户几乎没有用处。

标签： css internet-explorer firefox flexbox

【解决方案1】：

您的问题是.flex-grid (.section-home) 周围的容器设置为float: left; 并且没有设置width。这意味着它将被设置为width: auto;，因为它是一个浮动元素，这意味着它的内容将决定它的宽度。在这种情况下，浏览器选择计算宽度的方式似乎有所不同：

Chrome 将 .section-home 限制为其父级的宽度
IE 让.section-home 增长到它需要容纳.flex-grid 的所有子级的程度

有几种方法可以解决这个问题，但是，最简单的方法是从 .section-home 中删除 float: left;，因为它似乎无论如何都不需要。

.section-home {
  /*float: left; Remove this*/
}
/*** Flex Grid ***/

.flex-grid {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.flex-grid .flex-item {
  display: flex;
  display: -webkit-flex;
  margin-top: 2rem;
}

<div class="section-home">
  <!-- PRODUCTS -->
  <div class="products-home flex-grid">
    <div class="flex-item">
      <div class="collection-item animated shown">
        <div class="collection-wrap">
          <div class="collection-image">
            <a href="{{ route('cuadrospersonalizados') }}">
              <img class="img-responsive" src="{{ FotImg::asset('img/fotolienzos.jpg') }}?dts={DPL_TS}" alt="Cuadros personalizados" title="Cuadros personalizados">
              <span class="description">
                        <p>Lienzo con tus fotos colocado sobre madera de pino</p>
                    </span>
              <div class="caption">
                <h2>Fotolienzos</h2>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-item">
      <div class="collection-item animated shown">
        <div class="collection-wrap">
          <div class="collection-image">
            <a href="{{ route('fotolienzosconreloj') }}">

              <img class="img-responsive" alt="Fotolienzos con Reloj" title="Fotolienzos con Reloj" src="{{ FotImg::asset('img/fotolienzos-con-reloj.jpg') }}?dts={DPL_TS}">

              <div class="label-new">
                <span class="new">novedad</span>
              </div>

              <span class="description">
                            <p>Lienzo personalizado con reloj colocado sobre bastidor de madera</p>
                        </span>

              <div class="caption">
                <h2>Fotolienzos con Reloj</h2>
              </div>

            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-item">
      <div class="collection-item animated shown">
        <div class="collection-wrap">
          <div class="collection-image">
            <a href="{{ route('posterspersonalizados') }}">
              <img class="img-responsive" alt="Pósters personalizados" title="Pósters personalizados" src="{{ FotImg::asset('img/posters-personalizados.jpg') }}?dts={DPL_TS}">
              <span class="description">
                        <p>Pósters especialmente pensados para habitaciones juveniles e infantiles</p>
                    </span>
              <div class="caption">
                <h2>Pósters personalizados</h2>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- PRODUCTS -->
</div>

【讨论】：

谢谢！，完美答案：D
@FunnyFrontend 没问题，很高兴我能帮上忙。