我无法理解 flex 的意外行为 (shorthand 属性)

Question

我很难理解 flexboxes。这次我在这里无法理解 flex 属性的行为，例如当将 flex 放入 flexbox 的容器（在本例中为 .photoblog）时，flex 如何以及为什么表现得像这样。有人请帮助我理解这一点。

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>

我把 flex 属性一一放在 .photoblog 和 .image 中。这是结果。我不明白属性保存在 .photoblog 部分时的行为。

Answer 1

您的 .image 不是 flexbox。 flexbox（又名“flex container”）是具有 display: flex 的元素（在您的情况下为 .photoblog）。 Flex 项目是 flexbox 的子项（因此在您的情况下，.images 是 flex 项目）。 flex shorthand 属性 (flex: 2 0 10rem) 只有在 flex item.

上指定时才有意义

Answer 2

如果您的问题出在第一张图片中，请从 .photoblog 中删除这些图片

flex-wrap: wrap;
 justify-content: space-between;

我无法理解 flex 的意外行为 (shorthand 属性)

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

html

css

flexbox

CSS

HTML