Flexbox 显示为列，而不是行

Question

我正在为博客创建“最近的帖子”部分。我想展示三张连续弯曲的卡片。目前，它们显示完美——但在一个列中。我已经在 .blog-related-posts 容器上尝试了 flex-direction class，但没有成功。

该站点在 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;
}

Answer 1

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

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

我认为您将 display: flex 放在了错误的元素上

Answer 2

display: flex 适用于您申请的元素的直接子元素。我认为您应该将 display: flex 应用于 blog-related-posts__post-wrapper，或者使用 class blog-related-posts__post-wrapper.

删除 div

此外，您无需指定 flex-direction: row，因为它默认为行。

希望能帮到你

Flexbox 显示为列，而不是行

Flexbox displaying as column, not row

html

css

flexbox

hubspot-cms