html - 拉伸(stretch) div 和图片以填充完整的部分 ID，部分 ID ="Matches"是问题

Question

我一直在学习在线类(class)，无法让一组文章展开以填充为每个部分 ID 分配的完整 1000 像素。我可以添加更多文本，但这是一个快速修复，并且希望知道将来可以使用的更好的解决方案。我希望“玩家和比赛”部分都能充分利用分配的全部 1000 像素。这也是我对 HTML/CSS 的第一次尝试，所以如果发现任何其他提示或修复，我会很高兴知道。

尝试对 CSS 文件中的类和 ID 进行大量更改。

HTML

            <article>
                <div class="player-image" style="background:url(data:image/)"></div>
                <a href="https://en.wikipedia.org/wiki/Sadio_Man%C3%A9"><h3>Sadio Mane</h3></a>
                <p>Europe's hottest winger goes into the final in red hot form<p>
            </article>

            <article>
                <div class="player-image" style="background:url(data:image/)"></div>
                <a href="https://en.wikipedia.org/wiki/Mohamed_Salah"><h3>Mohamed Salah</h3></a>
                <p>Our record breaking forward finds form at the ideal time<p>
            </article>

            <article>
                <div class="player-image" style="background:url(data:image/)"></div>
                <a href="https://en.wikipedia.org/wiki/Virgil_van_Dijk"><h3>Virgil Van Dijk</h3></a>
                <p>The man mountain destined to shut out Spurs in the final<p>
            </article>
                    <br /><br />

        </section>

        <section id="Matches">
            <article>
                <div class="game-image" style="background:url(data:image/)"> </div>
                <h3>Liverpool 4 - 0 Barcelona</h3>
                <p> blaaaaaaaaaa... <a href="#" class ="more-link">more...</a>
            </article>

            <article>
                <div class="game-image" style="background:url()"></div>
                <h3>Liverpool 2 - 0 Spurs</h3>
                <p> blaaaaaaaaaa... <a href="#" class ="more-link">more...</a>
            </article>

            <article>
                <div class="game-image" style="background:url(data:image/)"></div>
                <h3>Liverpool 5 - 1 Arsenal</h3>
                <p> blaaaaaaaaaa... <a href="#" class ="more-link">more...</a>
            </article>

        </section>

CSS

article {
    max-width:30%;
    display:inline-block;
    padding:5px;
    margin:5px;
    box-shadow: 1px 1px 10px #000;
    border-radius: 5px;
    border:2px solid #000;
    transition: box-shadow 1500ms;
    }

article img{
    max-width:100%;
}

#Players{
    width: 1000px;
    margin:auto;
    margin-top:20px;
    text-align:center;
    }

#Matches{
    width: 1000px;
    margin:auto;
    margin-top:20px;
    display:flex;
    flex-direction: row;
    align-items:stretch;
    }

.Player{
    text-align:center;

}

.player-image {
    height:200px;
    width:100%;
    background-size:cover !important;
    background-position:center !important;
    border:0px solid transparent;
    border-radius:25%;
}

.game-image {
    height:200px;
    width:100%;
    background-size:cover !important;
    background-position:center !important;
    border:0px solid transparent;
    border-radius:25%;

Answer 1

flex 增长:1； - 使元素在主轴上均匀占据所有可用空间