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%。

浏览器支持:所有主要浏览器，except IE < 10都支持Flexbox。最近的一些浏览器版本，如Safari 8和IE10，需要供应商前缀。要快速添加前缀，请使用自动复位器。关于这个答案的更多细节。