css - 带有静态宽度容器的 Flex

Question

问题:当我为 flex'a 父容器分配静态宽度时，flex 功能停止工作。

我的目标:在具有静态宽度的父容器中拥有功能性 flex 布局。

现在:这种 flex 布局使用“100%”父容器宽度完美工作。但是当我分配静态宽度时，“flex”停止工作。

意思...只要当前 100% 的宽度等于窗口大小，flex 就可以正常工作……因为它会调整到窗口的宽度。

更多信息:

• 此 flex 代码将在仅允许 HTML 和 JS/JQ 的主题页面中使用。
• 此部分将位于模板/页面的“中间”部分内。
• 我没有使用 CMS(即 Wordpress)
• 模板的 CSS 将“页面”类设置为 100% 宽度...这是我无法更改的
• flex 部分需要在页面中水平居中

JSFiddle:下面 JSFiddle 中的默认 CSS 为容器使用“100%”宽度 = Flex 工作正常。我已经评论了导致 flex 停止工作的 CSS 类参数 (mainwrapper)。

JSFiddle 链接: JSFiddle

Answer 1

使用 max-width:980px 你可以删除 width:100% 因为我指定了最大宽度 980px。

如果我遗漏了什么，请检查 fiddle 代码

Working fiddle

.mainwrapper {
  width: 100%;
  /* Here's the problem:*/
  /* Asigning a static width breaks flex */
  max-width: 980px;
  text-align: center;
}

.page {
  width: 100%;
  margin: 0 auto;
}

.mainwrapper {
  width: 100%;
  /* Here's the problem:*/
  /* Asigning a static width breaks flex */
  max-width: 980px;
  text-align: center;
}


/* Product Layout */

.section-holder {
  display: flex;
  flex-flow: row wrap;
}

.section-item {
  display: flex;
  flex-direction: column;
  padding: 2%;
  flex: 1 24%;
  background-color: #FFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
}

.section-image img {
  width: 100%;
}

.section-info {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

@media ( max-width: 768px) {
  .section-item {
    flex: 1 21%;
  }
  .section-holder .section-item {
    flex: 2 46%;
  }
}

@media ( max-width: 680px) {
  .section-item {
    flex: 1 46%;
  }
}

@media ( max-width: 480px) {
  .section-item {
    flex: 1 100%;
  }
  .section-holder .section-item {
    flex: 2 100%;
  }
}

<div align="center" class="page">
  <div class="mainwrapper">

    <div class="section-holder">
      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

      <div class="section-item">
        <div class="section-image">
          <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="section-info">
          <h5>Winter Jacket</h5>
          <h6>$99.99</h6>
        </div>
      </div>

    </div>

  </div>
</div>