为什么在这个div中，flex项的增长不一样？

Question

• 尝试让我的弹性项目在.sec-3 div中同等地占据div。我给出了两个弹性项-- 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属性。

更具体地说，flex属性只有在父元素具有display: flex或display: inline-flex时才能工作。

在您的代码中，.sec-3只有一个子元素.sec-3-flex，并且这个子子项不是一个flex项，因为父容器不是flex容器。

然而。.sec-3-flex是一个灵活的容器。它有两个flex项：picture和.sales-copy-wrap。

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

如果希望两个兄弟姐妹的宽度相等，则将flex: 1添加到picture中。

将flex: 1交给picture的img子程序没有任何作用，因为picture不是一个flex容器。