不封装在火狐和IE11中的Flexbox

Question

我在我的网站上有一个柔性盒网格，它在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>

​

flex在Chrome中正确显示，但在IE和Firefox中，项目保持在一行，不包装。为什么会这样呢？

Answer 1

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

• Chrome将.section-home限制在其父节点的宽度
• IE让.section-home生长得像它所需要的那样容纳.flex-grid的所有子级

有几种方法可以解决这个问题，但是，最简单的方法是从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>

​