我如何獲得該證明內容才能正常工作？ （使用flexbox）

Question

大家好，我正在為uni做一個小型練習項目，遇到了這個問題。 我嘗試了很多方法似乎都無效。 我試圖在具有彈性行的flexbox時使用正當內容（覆蓋原來的flex-direction：column站點）。 同時顯示：不需要顯示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%;
}
...