html - CSS - 对齐内容不影响 flex 元素

Question

所以我正在处理一个小型技术挑战并使用 flexbox。我在父 div 和同一个 css 属性中设置了 display: flex; 我正在尝试使用 justify-content 来 space-evenly。然而，它根本没有效果。

我的 CSS:

.relatedFlex 
{
  display: flex;
  background-color: #fff;
  justify-content: space-between;
}

我的 HTML:

   <section class="relatedPost">
    <div class="wrapper">
        <h2>Related post:</h2>
        <div class="relatedFlex">
            <div class="relatedSectionOne">
                <img class="photoWidth" src="assets/image-2.jpg" alt="Looking Stoic">
                <div>
                    <p>MAR 9, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
            <div class="relatedSectionTwo">
                <img class="photoWidth" src="assets/image-3.jpg" alt="Hands On Learning">
                <div>
                    <p>MAR 15, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
            <div class="relatedSectionThree">
                <img class="photoWidth" src="assets/image-3.jpg" alt="Hands On Learning">
                <div>
                    <p>MAR 15, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

只给相关部分的宽度

.relatedFlex {
display: flex;
background-color: #fff;
justify-content: space-between;
}

.relatedSectionOne{
width:15vw;
}

   <section class="relatedPost">
    <div class="wrapper">
        <h2>Related post:</h2>
        <div class="relatedFlex">
            <div class="relatedSectionOne">
                <img class="photoWidth" src="assets/image-2.jpg" alt="Looking Stoic">
                <div>
                    <p>MAR 9, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
            <div class="relatedSectionOne">
                <img class="photoWidth" src="assets/image-3.jpg" alt="Hands On Learning">
                <div>
                    <p>MAR 15, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
            <div class="relatedSectionOne">
                <img class="photoWidth" src="assets/image-3.jpg" alt="Hands On Learning">
                <div>
                    <p>MAR 15, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
        </div>
    </div>
</section>