如何让这种合理内容发挥作用？ （使用flexbox）

Question

嘿伙计们我正在为uni做一个小型练习项目，并遇到了这个问题。我尝试过很多方法似乎都没有用。我正在尝试使用对齐内容，同时使flexbox具有行的弯曲方向（覆盖flex-direction的原始站点：列）。同时显示：不需要显示flex，因为它在媒体查询之外的单独样式表中显示。任何帮助都会非常感谢。

这是媒体查询中的代码，请注意它是一个SASS文件。

.testimonials{
    padding: 50px;
    flex-direction: row;
    justify-content: space-around;
}

这是html

<section class="testimonials">
        <article class="testimonial_InnerContain">
            <div class="speech_box">
                <p>The moment our customers and even competitors started asking who dos your beautiful design, we knew that we has found a gret designer</p>
            </div>
            <p><span>Oliver Auerbach,</span> Founder &#38; CEO</p>
            <p>GloriaFood</p>
        </article>
        <article class="testimonial_InnerContain">
            <div class="speech_box">
                <p>Bota delivers quality work at competitive rates. He creates beautiful and simle user interfaces in line with your business objectives.</p>
            </div>
                <p><span>Rikard Stolz,</span> Senior Conversion and UX Planner</p>
                <p>JBA Digital</p>
        </article>
        <article class="testimonial_InnerContain">
            <div class="speech_box">
                <p>Bota is the most talented designer and front-end developer i have worked with. He has an amazing ability to understand the mission and puts great passion in what he does. He truly is great and i would recommend him for his full professionalism.</p>
            </div>
                <p><span>Pierre Landmark,</span> Co-Founder of Foxshare</p>
        </article>
    </section>

它的目的是看起来像这样

但它看起来像这样

此外，justify-content的所有属性都没有工作

Answer 1

文章需要一个宽度，以便空格或空间 - 之间可以正常工作。在较小的屏幕上将宽度设置为100％。

.testimonials {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.testimonials>article {
  width: 30%;
}

@media screen and (max-width: 768px) {
  .testimonials>article {
    width: 100%;
  }
}

<section class="testimonials">
  <article class="testimonial_InnerContain">
    <div class="speech_box">
      <p>The moment our customers and even competitors started asking who dos your beautiful design, we knew that we has found a gret designer</p>
    </div>
    <p><span>Oliver Auerbach,</span> Founder &#38; CEO</p>
    <p>GloriaFood</p>
  </article>
  <article class="testimonial_InnerContain">
    <div class="speech_box">
      <p>Bota delivers quality work at competitive rates. He creates beautiful and simle user interfaces in line with your business objectives.</p>
    </div>
    <p><span>Rikard Stolz,</span> Senior Conversion and UX Planner</p>
    <p>JBA Digital</p>
  </article>
  <article class="testimonial_InnerContain">
    <div class="speech_box">
      <p>Bota is the most talented designer and front-end developer i have worked with. He has an amazing ability to understand the mission and puts great passion in what he does. He truly is great and i would recommend him for his full professionalism.</p>
    </div>
    <p><span>Pierre Landmark,</span> Co-Founder of Foxshare</p>
  </article>
</section>

在codepen示例中（在第22行左右），您可以执行

...
#testimonials {
  padding: 50px;
  flex-direction: row !important; // Add !important
  justify-content: space-between;
}

.testimonial_InnerContain { // Add this class of article and give it a width
  width: 30%;
}
...