如何獲得此證明內容的工作？ （使用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%; 
} 
...