Flexbox отображается как столбец, а не строка

Я создаю раздел «Последние сообщения» для блога. Я хочу отобразить три карты, которые сгибаются подряд. В настоящее время они отображаются отлично, но в столбце. Я пробовал flex-direction в классе контейнера .blog-related-posts, но безуспешно.

Сайт работает на CMS Hubspot.

Вот код:


        <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;
}
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
33
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

div {
 display: flex;
 /* flex-direction: row; it's row by default */
}
<div>
  <p>paragraph1</p>
  <p>paragraph2</p>
  <p>paragraph3</p>
 </div>

я думаю, вы помещаете display: flex не на тот элемент

Ответ принят как подходящий

display: flex работает с прямыми дочерними элементами элемента, для которого вы его применяете. Я думаю, вы должны либо применить display: flex к blog-related-posts__post-wrapper, либо удалить div с классом blog-related-posts__post-wrapper.

Кроме того, вам не нужно указывать flex-direction: row, поскольку по умолчанию это строка.

Надеюсь, я смог помочь

Большое спасибо, Давид! Это указало мне на настоящего виновника — Hubspot добавлял свою собственную оболочку класса, и как только я сделал эту гибкость в CSS (и удалил все дополнительные устаревшие оболочки), все снова стало хорошо. Хорошего дня!

Erin Stratton 22.04.2022 21:58

Добро пожаловать)

David 22.04.2022 22:06

Другие вопросы по теме