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> 

는 분명히 기사에 루핑,하지만 나는 그들을 왼쪽으로 표시하는 방법을 잘 모르겠어요

Answer 1

이 시도 ... https://www.okuhstudios.com/blogs/news 내 새로운 코드는 <hr> 라인의 모든 아래 페이지 하단에 제공 :

오른쪽 4 각 행에 ...

내 사이트가 여기에있다

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

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

이 코드는 ul을 플렉스 컨테이너로 만들고 하위 요소를 줄 바꿈합니다.

각 하위 요소의 초기 너비는 21 % (flex-basis: 21%)입니다. 이렇게하면 행당 최대 4 개의 항목이 허용됩니다. 회선에 여분의 공간이 있으면 flex-grow: 1으로 소모됩니다.

flex-basis: 25%을 사용하지 않은 유일한 이유는 네 번째 항목을 줄 바꿈시킬 수있는 여백, 여백 또는 테두리가 있는지 모르기 때문입니다. 그것은 당신을 위해 작동한다면 25 % 만들 수 있습니다.

---

브라우저 지원 : 인 flexbox는, except IE < 10 모든 주요 브라우저에서 지원됩니다. Safari 8 및 IE10과 같은 일부 최신 브라우저 버전은 vendor prefixes이 필요합니다. 접두사를 추가하는 빠른 방법은 Autoprefixer을 사용하십시오. this answer에서 자세한 내용.