これを機能させるためにフレックスボックスを2回適用する必要があるのはなぜですか？

タイトルについては申し訳ありませんが、それはかなり不明確ですが、私はそれを他に書く方法を知りませんでした。

つまり、基本的には、HTMLとCSSだけで非常にシンプルなWebサイトを作成しています。カードの<a>どこをクリックしてもクリックできるようにしたかったので、独自の親要素を持つこれら3つのカードがあります。そして、それらすべての要素は、というdivタグでラップされますcards

要素にアンカータグを追加する前cardsは、CSSファイルのクラスでflexboxを使用するだけで、すべてのカードを中央に配置していました。この時点まで、すべてのカードは同じ線上にあり、完全に中央に配置されていました。ここで、各カードを別々のアンカータグでラップした後、cardsクラスで使用したのと同じフレックスボックス形式をそのdiv内のすべてのアンカー要素に適用しました。この時点まではすべて良好です。しかし、cardsクラスでフレックスボックスのフォーマットを削除すると、アンカータグであるカードの親が同じフレックスボックスのフォーマットを持っていても、すべてのカードがブロック要素に変わります。では、なぜそれが起こるのでしょうか？フレックスボックスは直接の子供にのみ適用され、孫には適用されないと思いました。

.cards{
    display: flex;
    justify-content: space-between;
}

.cards a {
    display: flex;
    text-align: center;
    color: white;
    text-decoration: none;
    margin: 0 1rem;
}
.cards p {
    font-size: 0.85rem;
    line-height: 1.2rem;
    padding: 0 1.25rem;
}

.card1{
    background-image: url("images/image-background-card1.jpg");
    background-size: cover;
    background-position: bottom;
    min-height: 200px;
    width: 100%;
}
.card2{
    background-image: url("images/image-background-card2.jpg");
    background-size: cover;
    background-position: bottom;
    min-height: 15.625rem;
    width: 100%;
}
.card3{
    background-image: url("images/image-background-card3.jpg");
    background-size: cover;
    background-position: bottom;
    min-height: 15.625rem;
    width: 100%;
}

    <div class="cards">
            <a href="#">
                <div class="card1">
                    <i class="fas fa-motorcycle"></i>
                    <h2>Book Online</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque hic illum accusantium ratione corporis voluptatem.</p>
                </div>
            </a>
            <a href="#">
                <div class="card2">
                    <i class="fas fa-wrench"></i>
                    <h2>Service Types</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt praesentium placeat sapiente nulla omnis voluptatum!</p>
                </div>
            </a>
            <a href="#">
                <div class="card3">
                    <i class="fas fa-phone-square-alt"></i>
                    <h2>Call for Advice</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt praesentium placeat sapiente nulla omnis voluptatum!</p>
                </div>
            </a>
        </div>

したがって、基本的に.cardscssファイル内のものを削除すると、各カードの親の内部に同じフレックスボックス形式があり、他のcssが無意味になると思っていたとしても、要素はインラインになります。

これがコーデックスなので、私が何を意味するのかがわかります。カードの画像を背景色に置き換えました。codepen