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 成为弹性容器并允许子元素换行。

每个子元素的初始宽度为 21% (flex-basis: 21%)。这允许每行最多四个项目。如果行上有任何多余的空间，它会被 flex-grow: 1 占用。

我没有使用flex-basis: 25% 的唯一原因是因为我不知道你是否有边距、内边距或边框，这可能会导致第四个项目换行。如果它适合你，你可以把它提高到 25%。

---

浏览器支持：所有主流浏览器都支持 Flexbox，except IE < 10。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。更多详情this answer。