html - 为什么 flex 元素在这个 div 中增长不均匀？

Question

• 试图让我的 flex 元素在 .sec-3 div 中平均占据 div。我给了两个 flex 元素 flex:1; 这应该意味着flex-basis 和 flex-grow: 为 1 收缩 0？

• 我也尝试过使用 justify-content:space-between 但没有
  工作？不确定为什么？

有什么想法吗？

HTML

<div class="sec-3">
            <!-- iphone image  -->
        <div class="sec-3-flex">
        <!-- Iphone 1 image -->
            <picture>
                <!-- <source media="(min-width: 320px)" srcset="img/mobile/mobile-iphone-1.jpg"> -->
                          <source media="(min-width: 320px)" srcset="img/desktop/images/home_11.jpg">
                <img  id="iphone-2-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:50%">
            </picture>
            <div class="sales-copy-wrap">
                <h3>Get organized with events, tasks and notes.</h3>
                <p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p>
            </div>              
        </div>

    </div>

CSS

/* SECTION THREE */
.sec-3 {
    background-color: #f1eeee;
    margin-top: -22px;
}
.sec-3-flex {
    background-color: red;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;

 }
.sec-3-flex #iphone-2-img {
    padding-top: 30px;
    background-color: orange;   
    flex:1;

 }
.sec-3-flex .sales-copy-wrap {
    background-color: yellow;
    flex:1;
 }

Answer 1

范围 flex formatting context是父子关系。 flex 容器的子代以外的后代不是 flex 元素，不会接受 flex 属性。

更具体地说，只有当父元素具有display: flex 或display: inline-flex 时，flex 属性才会起作用。

在你的代码中，.sec-3 只有一个子项，.sec-3-flex，这个子项不是 flex item，因为父项不是一个 flex 容器。

但是。 .sec-3-flex 是一个 flex 容器。它有两个 flex 元素:picture 和 .sales-copy-wrap。

只有 .sales-copy-wrap 有 flex: 1。

如果您希望两个 sibling 的宽度相等，请将 flex: 1 添加到 picture。

将 flex: 1 赋给 picture 的 img 子元素什么都不做，因为 picture 不是 flex 容器.