Comment puis-je faire fonctionner ce contenu de justification? (En utilisant la flexbox)

Question

Hé les gars je fais un petit projet de pratique pour uni et suis tombé sur ce problème. J'ai essayé de nombreuses façons, aucune ne semble fonctionner. J'essaie d'utiliser le contenu justifié tout en ayant la flexbox avec une flex-direction de la ligne (remplaçant les sites originaux de flex-direction: colonne). Afficher aussi: flex n'est pas nécessaire pour être affiché car il est affiché dans une feuille de style séparée, en dehors de la requête média. Toute aide serait super merci.

Ceci est le code dans la requête média, s'il vous plaît noter qu'il s'agit d'un fichier SASS.

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

Voici le code 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> 

Son but est de ressembler à ceci

Mais son qui ressemble à ceci

également aucune des propriétés pour justifier contenu travaillent

Answer 1

Les articles besoin une largeur de telle sorte que l'espace autour ou espace entre peut fonctionner. Sur les écrans plus petits, réglez la largeur à 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>

---

Dans l'exemple codepen (vers la ligne 22), vous pouvez faire

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