I can't understand the Unexpected behavior of flex (shorthand property)

Issue

I have a hard time understanding flexboxes. This time I can’t understand the behavior of flex property here, like how and why is flex behaving like this when put into the container of flexbox (that is .photoblog in this case). Somebody please help me understanding this.

CSS

.photoblog{            /* the container for flexbox */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    flex: 2 0 10rem;                
}

.image{                        /* flexboxes made through <div>*/
    width: 400px;
    height: 700px;
    margin: 1.2rem;
    object-fit: cover;
    border-radius: 2rem;
    transition: all ease-in 0.3s;
    box-shadow: 0.3rem 0.5rem 1px rgb(59, 58, 58);
}

HTML

<body>
    <section id="flex">
        <nav>
            This is my new photo blog.
        </nav>
       
        <div class="photoblog">
            <img src="images/1.jpg" alt="" class="image"><img src="images/2.jpg" alt="" class="image"><img src="images/3.jpg" alt="" class="image">
            <img src="images/4.jpg" alt="" class="image"><img src="images/5.jpg" alt="" class="image"><img src="images/6.jpg" alt="" class="image">
            <img src="images/7.jpg" alt="" class="image"><img src="images/8.jpg" alt="" class="image"><img src="images/9.jpg" alt="" class="image"><img src="images/10.jpg" alt="" class="image">
        </div>
        <hr>
    </section>
</body>

I put the flex property in both the .photoblog and .image one by one. And here are the results. I don’t understand the behavior of the property when it is kept into the .photoblog section.

when I put the property in .photoblog

when I put the property in .image

Solution

Your .images aren’t flexboxes. The flexbox (aka "flex container") is the element that has display: flex (.photoblog in your case). Flex items are the children of the flexbox (So in your case, .images are flex items). The flex shorthand property (flex: 2 0 10rem) only makes sense when specified on a flex item.

Answered By – dgrogan

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.