带有静态宽度容器的Flex

Question

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

我的目标： 在具有静态宽度的父容器内具有功能柔性布局。

RIGHT NOW： 这个柔性布局完美地使用“100％”父容器宽度。但是当我分配一个静态宽度时，“flex”停止工作。

含义...... 只要当前的100％宽度等于窗口大小，flex就可以正常工作......因为它可以调整窗口的宽度。

更多信息：

• 这Flex代码将在主题页面，只允许HTML & JS/JQ内使用。
• 此部分将位于模板/页面的“中间”部分。
• 我没有使用CMS（即：WordPress的）
• 模板的CSS已经在“页面”类为100％的宽度......的东西，我不能改变
• 挠性区段必须水平居中在页面

的jsfiddle： 在的jsfiddle默认CSS如下使用用于所述容器中的 “100％” 宽度= Flex的工作正常。我评论过导致flex停止工作的CSS类参数（mainwrapper）。

​​JSFiddle

Answer 1

使用max-width:980px你可以删除width:100%因为我分配的最大宽度980px。

如果我错过了一些东西请小提琴代码

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>

Answer 2

我认为你需要从block该类page改变display到flex。如果我正确理解你的问题。

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

到

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