Question

尝试让我的弹性项目在.sec-3 div中平均占用div。我已经给出了两个灵活项flex:1; flex-basis和flex-grow:为1并缩小0？
我还尝试使用justify-content:space-between，但没有<\ n> 工作？不确定为什么？

有什么想法吗？

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属性仅在父元素具有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 img picture个孩子picture无效，因为cout << keyArray[0] + "\n"; cout << keyArray[1] + "\n"; cout << keyArray[2] + "\n"; cout << keyArray[3] + "\n"; cout << keyArray[4] + "\n"; cout << keyArray[5] + "\n"; cout << keyArray[6] + "\n";不是灵活容器。

为什么不在这个div中灵活地增加项目？

1 个答案: