如何获得此证明内容的工作？ （使用flexbox）

Question

嘿，我正在为uni做一个小练习项目，并且遇到了这个问题。我尝试了许多方法，似乎没有工作。我尝试使用对齐内容的同时让flexbox具有flex方向的行（覆盖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> 

其目的是这个样子

但它看起来像这样

还没有用于证明内容的属性正在

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%; 
} 
...