CSS-证明内容不影响固定项目

Question

因此，我正在应对一个小型技术挑战，并使用flexbox。我在父div上设置了display: flex;，并在同一CSS属性中尝试使用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>