Why do I need to apply flexbox twice to get this to work?

user_13816788 0
Viewed 167

Sorry about the title, it's pretty unclear but I didn't know how else to write it.

So basically, im making a pretty simple website with just HTML and CSS. I have these 3 cards that have their own <a> parent element because I wanted them all to be clickable no matter where on the card you clicked them. And then all those elements are wrapped in a div tag called cards

Before I added the anchor tags on the elements, I had centered all the cards by just using flexbox on the cards class in my CSS file. Up to this point all cards were on the same line and were perfectly centered. Now, after wrapping each card in separate anchor tags I applied the same flexbox formatting I had in the cards class to all anchor elements in that div. All good up to this point. But when I delete the flexbox formatting in the cards class, it turns all the cards into block elements even the cards parents which is the anchor tags, have the same flexbox formatting. So why does that happen? I thought flexbox only applied to direct children and not also the grandchildren.

.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>

So basically when I remove the .cards stuff in the css file, the elements turn into inline even though each cards parent has the same flexbox formatting inside it which I thought would have made the other css pointless.

Heres the codepen so you can see what I mean. I replaced the images in the cards with background color.codepen

flexbox css html
2 Answers

If I am understanding your question properly, Flexbox is working as it should. You have to imagine each component and its children as its own container. The 'cards' class aligns each individual card. Flex css on 'cards' only affects items that share a common parent (the direct children), aka how the cards are aligned relative to the cards container. That means that any content within the cards will not be affected by your styling so you will have to reassign flex properties.

In comes flex css for each individual card ('.cards a'). This only styles the direct children of each 'a' element, so how you want the content to be aligned. This means that if you remove the 'cards' flexbox classes, nothing is telling each card how it should be aligned relative to its container. That's why you have to redefine flex styling depending on the hierarchy and how you intend to align the content.

If I misunderstood please do correct me, but otherwise I hope this provides some insight!

user_128217390

The flex container itself behaves like a block element in normal flow (unless it is defined as inline-flex). Only the items directly inside the flex container participate in the flex layout. So assigning the display:flex property to anchor tags will convert those into block elements and each will cover a separate line. Only the direct children inside this, which in your case is a div element will behave like a flexible item.

When you assign display:flex to .cards, it converts the a elements into flexible children thus displaying them in a single line.

user_73533190
Related