Shopify Dev - 顯示行中的博客文章

Question

當前位於Shopify的我的博客頁面中，博客文章作爲列表項在UL中一個接一個地顯示。

我想他們中的4代碼，我目前行顯示的是：

<ul id="blog-articles" class="desktop-4 tablet-4 mobile-2"> 
    {% for article in blog.articles %} 
    <li class="single-article"> 

     <div class="article-body desktop-12"> 
     <h2><a href="{{ article.url }}">{{ article.title }}</a></h2> 

     <a href="{{ article.url }}"> 
     <div class="article-content"> 
      {% if article.image %}<img class="article-image" src="{{ article.image | img_url: 'grande' }}" alt="{{ article.title }}">{% endif %} 
     <div class="clear"></div> 
     </div> 
     </a> 
     </div> 
    </li> 
    {% endfor %} 
    </ul> 

所以它顯然循環中的文章，但我不知道如何顯示它們留下來右，4每一行...

我的網站是在這裏：https://www.okuhstudios.com/blogs/news和我的新代碼排在所有<hr>線下方的頁面底部...

Answer 1

試試這個：

#blog-articles { 
    display: flex; 
    flex-wrap: wrap; 
} 

.single-article { 
    flex: 1 0 21%; /* flex-grow, flex-shrink, flex-basis */ 
} 

此代碼將使ul爲flex容器並允許子元素包裝。

每個子元素的初始寬度爲21％（flex-basis: 21%）。這允許每行最多四個項目。如果生產線上有任何額外的空間，則消耗flex-grow: 1。

我沒有使用flex-basis: 25%的唯一原因是因爲我不知道是否有邊距，填充或邊框，這可能會導致第四個項目打包。如果它適合你，你可以使它成爲25％。

---

瀏覽器支持： Flexbox的是所有主流瀏覽器的支持，except IE < 10。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前綴，請使用Autoprefixer。更多詳情，請點擊this answer。