Flexbox顯示為列，而不是行

我正在為博客創建一個“最近的帖子”部分。我想顯示三張連續彎曲的卡片。目前，它們正在完美地顯示——但在一個列中。我在 .blog-related-posts 容器類上嘗試了 flex-direction，但沒有成功。

該網站位于 Hubspot CMS 上。

這是代碼：

        <hr>
                  <div>

            <h2 class="blog-related-posts__title">
                Related Posts
            </h2>
              </div>
             <!-- related blog posts section starts here -->
            
  {% macro blog_post_formatter(post) %}

      <div class="blog-related-posts__post">
        
        {% if post.featured_image %}
        <a href="{{ post.absolute_url }}"><img class="related-img" loading="lazy" alt="{{ post.featured_image_alt_text }}" src="{{ resize_image_url(post.featured_image,0,0,300) }}"></a>
{% endif %}
        
        <div class="blog-related-posts__post-content">
          <div>
            <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
         

              <div class="kl-slider-testimonial__button-sm">
                {# {{ render_button(item.primary_cta) }} #}
                <a class='button buttonwhite--arrow' href='{{ post.absolute_url }}'> Read More </a>
            
              </div>
            </div>
            
             
       
        </div>
      </div>
  
    

  {% endmacro %}

                
  <div class="blog-related-posts">  
    <div class="blog-related-posts__post-wrapper">

  {% related_blog_posts limit=3, post_formatter="blog_post_formatter" %}
  
</div>
 

</div>

  <!-- end of blog related section --> 

          
  

以及相關的 CSS：

 hr {
  margin: 60px 0 60px 0;
}

.blog-related-posts {
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

.blog-related-posts__post-wrapper {
    flex-basis: 30%;
    padding: 15px;
    box-sizing: border-box;
    }

.blog-related-posts__post {
  margin: 0;
    padding: 20px 20px;
  border: 0.5px solid rgba({{theme.cards.border_color.color|convert_rgb}}, {{theme.cards.border_color.opacity != null ? theme.cards.border_color.opacity / 100 : 1}});
  box-shadow: 0px 11px 30px rgba({{theme.cards.box_shadow.color|convert_rgb}}, {{theme.cards.box_shadow.opacity != null ? theme.cards.box_shadow.opacity / 100 : 1}});
  border-radius: {{theme.cards.border_radius}}px;
}



@media screen and (max-width:991px){
.blog-related-posts__post-wrapper {
width: 50%;
}
}



.blog-related-posts__title {
  color: {{theme.global_colors.primary_color.color}};
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  line-height: 23px;
  margin: 40px auto;
}


.blog-related-posts__post-content h2 {
  color: {{theme.global_colors.primary_color.color}};
  font-size: 23px;
  font-weight: 800;
  text-align: center;
  margin: 10px;
}

.blog-related-posts__post-content h3 {
  color: {{theme.global_colors.primary_color.color}};
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  line-height: 23px;
  margin: 10px;
}

.blog-related-posts__post-content h3 a {
  color: {{theme.global_colors.primary_color.color}};  
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  line-height: 23px;
}

.blog-related-posts__post-content h3 a:hover {
  color: #2da6dd;
  text-decoration: none;
}

.blog-related-posts__post-content a {
  margin: 0 auto;
}

#blog-related-posts__post-image.lazy {
  background-image: none;
  background-color: #F1F1FA;
}

#bg-image {
  background-image: url( {{post.featured_image }});
  height: 170px;
  background-size: contain;
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  flex-shrink: 0;
}

#blog-related-posts__post-image {
  display: block;
  width: 100%;
  height: 170px;
  background-size: contain;
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  flex-shrink: 0;
}

#blog-related-posts__post-image > background {
  object-fit: contain;
  display: block;
}

uj5u.com熱心網友回復：

display: flex適用于您應用它的元素的直接子代。我認為你應該申請display: flex，blog-related-posts__post-wrapper或洗掉div類blog-related-posts__post-wrapper。

此外，您不需要指定flex-direction: row，因為它默認是行。

希望我能幫上忙

uj5u.com熱心網友回復：

div {
 display: flex;
 /* flex-direction: row; it's row by default */
}

<div>
  <p>paragraph1</p>
  <p>paragraph2</p>
  <p>paragraph3</p>
 </div>

我認為您將 display: flex 放在錯誤的元素上

標籤：html css 弹性盒 hubspot-cms

上一篇：background-size:contains不顯示background-image時的條件

下一篇：如何在CSS中將下一行中的三個專案之一居中？