0
（我知道這個問題在很多情況下都有很好的記錄，但我似乎無法在我的案例中找到解決方法。）Flex-Basis - 未考慮圖像的元素高度不立即加載
問題是朝向頁面底部的flexbox元素的高度不夠 - 大概是因爲這些元素中的圖像加載速度很慢。
下面是一個例子：http://paleomagazine.com/paleo-websites-bloggers/
如果向下滾動到第3或第4日行，你會看到元素smushed因爲高度不足在一起。我試圖通過CSS和JS來做很多事情，包括（a）使用CSS轉換和（b）試圖強制JS重繪（更改顯示，offsetHeight，甚至webkitTransform）。這一切都沒有奏效（如果您檢查該頁面，您可以看到它目前仍在實施）。
.custom-cat1 section.bSe {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.custom-cat1 section.bSe article.no-flex {
flex-basis: 100%;
margin-bottom: 0;
}
.custom-cat1 section.bSe article.gdl {
flex-basis: 30%;
margin: 1rem .4rem;
box-shadow: 0 0 6px rgba(0, 0, 0, .2);
}
.custom-cat1 section.bSe article.gdl .recipe-link-cover {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
height: 100%;
}
.custom-cat1 .bSe article .awr {
border: none;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
height: 100%;
padding-bottom: 15px;
}
.custom-cat1 .gdl h2.entry-title {
font-size: 1.2em !important;
margin-top: 0 !important;
color: #444444;
}
.custom-cat1 .bSe article img {
width: 100%;
height: auto;
box-sizing: border-box;
max-width: 100%;
margin: 0 auto 10px auto;
overflow: visible;
}
.custom-cat1 .bSe article img:hover,
.custom-cat1 .gdl h2.entry-title:hover {
opacity: 0.8;
transform: scale(1.04);
}
.custom-cat1 .bSe article .awr p {
margin: 0 !important;
line-height: 1.1em !important;
}<div class="wrp cnt gin custom-cat1">
<section class="bSe fullWidth">
<article class="no-flex">
<p id="breadcrumbs"><span xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="http://paleomagazine.com/" rel="v:url" property="v:title">Home</a> » <span rel="v:child" typeof="v:Breadcrumb"><a href="http://paleomagazine.com/paleo-diet/" rel="v:url" property="v:title">Paleo Diet</a> » <strong class="breadcrumb_last">Paleo Websites and Bloggers</strong></span></span></span></p>
<div class="category-title">
<h1><span>Paleo Websites and Bloggers</span></h1>
</div>
<div class="subheader-optin">
<p>Ready to Get Started? <a><span class="tve-leads-two-step-trigger tl-2step-trigger-25517" style="display: inline;">Get Our Free 4-Week Paleo Meal Plan</span></a></p>
</div>
</article>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-eileen-laird">Blogger Spotlight – Eileen Laird</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-eileen-laird"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2016/02/Blogger-Spotlight-–-Eileen-Laird.jpg" alt="Blogger Spotlight – Eileen Laird" title="Blogger Spotlight – Eileen Laird"></a>
<p>Eileen Laird is the founder of Phoenix Helix and author of A Simple Guide to the Paleo Autoimmune... <a href="http://paleomagazine.com/blogger-spotlight-eileen-laird">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson">Blogger Spotlight – Kaylie Johnson</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2016/02/Blogger-Spotlight-Kaylie-Johnson.jpg" alt="Blogger Spotlight - Kaylie Johnson" title="Blogger Spotlight - Kaylie Johnson"></a>
<p>Kaylie Johnson is the founder of Joyful Bite, where she shares her Paleo journey and amazing... <a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-stefani-ruper">Blogger Spotlight – Stefani Ruper</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-stefani-ruper"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/12/Blogger-Spotlight-Stefani-Ruper.jpg" alt="Blogger Spotlight - Stefani Ruper" title="Blogger Spotlight - Stefani Ruper"></a>
<p>1. What got you interested in the Paleo lifestyle? Back in 2009, I was a vegetarian on the verge of... <a href="http://paleomagazine.com/paleo-blogger-stefani-ruper">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-mark-sisson">Blogger Spotlight – Mark Sisson</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-mark-sisson"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/10/Blogger-Spotlight-Mark-Sisson.jpg" alt="Blogger Spotlight - Mark Sisson" title="Blogger Spotlight - Mark Sisson"></a>
<p>1. What got you interested in the Paleo lifestyle? I was going through a major reevaluation of my... <a href="http://paleomagazine.com/paleo-blogger-mark-sisson">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-sarah-pope">Blogger Spotlight – Sarah Pope</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-sarah-pope"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/12/Blogger-Spotlight-Sarah-Pope.jpg" alt="Blogger Spotlight - Sarah Pope" title="Blogger Spotlight - Sarah Pope"></a>
<p>1. What got you interested in the whole foods lifestyle? The first big motivator was my... <a href="http://paleomagazine.com/paleo-blogger-sarah-pope">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado">Paleo Restaurant Feature: Shine Restaurant & Gathering Place</a></h2>
<a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2015/11/Paleo-Restaurant-Feature-Shine-Restaurant-Gathering-Place1.jpg" alt="Paleo Restaurant Feature: Shine Restaurant & Gathering Place" title="Paleo Restaurant Feature: Shine Restaurant & Gathering Place"></a>
<p>Shine Restaurant & Gathering Place in Boulder Colorado is owned by triplet sisters, Jennifer,... <a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-leslie-auman">Blogger Spotlight – Leslie Auman</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-leslie-auman"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/08/Leslie-Auman.jpg" alt="Blogger Spotlight - Leslie Auman" title="Blogger Spotlight - Leslie Auman"></a>
<p>Leslie Auman is the owner and founder of The Whole Life Balance. You can follow her on Instagram,... <a href="http://paleomagazine.com/blogger-spotlight-leslie-auman">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss">Blogger Spotlight – Jessica Furniss</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/08/Blogger-Spotlight-Jessica-Furniss.jpg" alt="Blogger Spotlight - Jessica Furniss" title="Blogger Spotlight - Jessica Furniss"></a>
<p>Jessica Furniss is the author behind Spiffy Eats & Giggle Water. You can follow her on... <a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky">Blogger Spotlight – Ainsley Daschofsky</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2015/09/Blogger-Spotlight-–-Ainsley-Daschofsky.jpg" alt="Blogger Spotlight - Ainsley Daschofsky" title="Blogger Spotlight – Ainsley Daschofsky"></a>
<p>1. What got you interested in the Paleo lifestyle? Oddly, the life train stopped at the low carb... <a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-chris-kresser">Blogger Spotlight – Chris Kresser</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-chris-kresser"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/09/Blogger-Spotlight-Chris-Kresser.jpg" alt="Blogger Spotlight - Chris Kresser" title="Blogger Spotlight - Chris Kresser"></a>
<p>1. What got you interested in the Paleo lifestyle? I suffered from a decade-long, debilitating... <a href="http://paleomagazine.com/paleo-blogger-chris-kresser">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-mary-herrington">Blogger Spotlight – Mary Herrington</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-mary-herrington"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Blogger-Spotlight-Mary-Herrington.jpg" alt="Blogger Spotlight – Mary Herrington" title="Blogger Spotlight – Mary Herrington"></a>
<p>1. What got you interested in the Paleo lifestyle? What got me interested in the Paleo lifestyle is... <a href="http://paleomagazine.com/blogger-spotlight-mary-herrington">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon">Blogger Spotlight – Danielle Gagnon</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Blogger-Spotlight-Danielle-Gagnon.jpg" alt="Blogger Spotlight - Danielle Gagnon" title="Blogger Spotlight - Danielle Gagnon"></a>
<p>1. What got you interested in the Paleo lifestyle? I spent most of my college and post-grad years... <a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/natures-palette-for-perfect-health">Nature’s Palette for Perfect Health</a></h2>
<a href="http://paleomagazine.com/natures-palette-for-perfect-health"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Natures-Palette-for-Perfect-Health.jpg" alt="Nature's Palette for Perfect Health" title="Nature's Palette for Perfect Health"></a>
<p>Jayson Calton, PhD and Mira Calton, CN are the founders of Calton Nutrition and the authors of... <a href="http://paleomagazine.com/natures-palette-for-perfect-health">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/interview-with-george-bryant">Interview with George Bryant – Civilized Caveman</a></h2>
<a href="http://paleomagazine.com/interview-with-george-bryant"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/04/george-bryant-featured-image.jpg" alt="george bryant featured image" title="george bryant featured image"></a>
<p>George Bryant of Civilized Caveman is one of our favorite people in Paleo – he’s... <a href="http://paleomagazine.com/interview-with-george-bryant">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance">Favorite Bloggers: Empowered Sustenance</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance"><img class="fwI" width="630" height="630" src="http://paleomagazine.com/wp-content/uploads/2014/12/lauren-geertsen.jpg" alt="lauren geertsen - empowered sustenance" title="lauren geertsen - empowered sustenance"></a>
<p>The Blog Empowered Sustenance The Blogger Lauren Geertsen Her Story Lauren, although still very... <a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance">more</a></p>
</div>
</article>
<div class="spr"></div>
<div class="clear"></div>
<div class="awr ctr pgn">
<span class="page-numbers current">1</span>
<a class="page-numbers" href="http://paleomagazine.com/paleo-websites-bloggers/page/2/">2</a>
<a class="next page-numbers" href="http://paleomagazine.com/paleo-websites-bloggers/page/2/">Next »</a>
</div>
<div class="bspr"></div>
<div class="clear" style="width: 100%; height: 1px; margin: 0;"></div>
<div class="custom-category-description"></div>
<div class="clear" style="width: 100%; height: 1px; margin: 0;"></div>
<div class="category-page-bottom-optins">
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', '7-Day Challenge', {'nonInteraction': 1});">
<span class="tve-leads-two-step-trigger tl-2step-trigger-25371" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/challenge-optin.jpeg" height="300" width="300"></span>
</a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', '7-Day Challenge', {'nonInteraction': 1});">
</div>
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', 'Favorite 11 Recipes', {'nonInteraction': 1});"><span class="tve-leads-two-step-trigger tl-2step-trigger-16874" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/favorite-paleo-recipes.jpg" height="300" width="300"></span></a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', 'Favorite 11 Recipes', {'nonInteraction': 1});">
</div>
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', 'Meal Plan', {'nonInteraction': 1});"><span class="tve-leads-two-step-trigger tl-2step-trigger-25517" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/meal-plan-optin.jpeg" height="300" width="300"></span></a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', 'Meal Plan', {'nonInteraction': 1});">
</div>
</div>
</section>
</div>任何幫助或建議這裏是極大的讚賞。
更多的代碼會找到答案的幫助。有什麼方法可以足以重現您的問題？ 我嘗試使用你提供的代碼，但你的HTML容器缺少你的HTML。 我也嘗試使用您提供的網站的代碼，但沒有更多的上下文，它證明是比我有時間投入更多的努力。 –
@DavidMann - 我正在更新我的文章，包括所有的代碼。 （我不反對把它全部包括在內 - 只是認爲它會讓它變得不必要的長）。我認爲我昨天做出的一些改變已經解決了這個問題，但他們沒有。 –