Flex布局的一个小问题，请各位大佬看看

[loveling]

    <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>

        .box {
            width: 30%;
            height: 200px;
            margin: 0 auto;
            background-color: black;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .one {
            flex: 1;
            color: white;
            width: 100%;
            background-color: red;

        }

        .two {
            flex: 1;
            color: white;
            width: 100%;
            background-color: green;

        }

        .three {
            flex: 2;
            color: white;
            width: 100%;
            background-color: blue;

        }

        .four {
            flex: 1;
            color: white;
            width: 100%;
            background-color: purple;
        }

使用弹性盒子进行布局，主容器宽度按百分比来设置，高度200px，想要设置四个子元素在主容器里面的宽度是100%，高度由内容自动撑开，设置换行后四个子容器都能正常换行，然后想要第三个子元素占有的比例大一些，就给第三个子元素设置了flex:2，其他三个子元素分别设置了flex：1，然后flex-wrap: wrap;这个属性就失效了，请问各位大佬，是不是flex布局时，只要子元素设置了flex：1或者需要更高的份额，flex-wrap: wrap;这个属性就会失效？
没有设置子元素flex：1时在flex-direction: row;时能换行，

子元素设置了flex：1后flex-wrap: wrap;这个属性就会失效。
请问各位大佬这是为啥？

[Johnson-Zheng]

一、需求
1.使用弹性盒子进行布局，主容器宽度30%（父元素我暂时理解为body），高度200px
2.设置四个子元素，在主容器中宽度100%，设置换行。
3.给第三个子元素设置了flex:2，其他三个子元素设置flex:1

二、问题
问题1：flex-wrap: wrap;这个属性失效。是不是flex布局时，只要子元素设置了flex:1或者需要更高的份额，flex-wrap: wrap;这个属性就会失效？

分析解答：
我复现了你的代码，实际上flex-wrap是起作用的，我不确定你是如何得到flex-wrap失效的结论，或许你有一些没有补充的信息。

1.你没有设置子元素最小宽度（常量值而不是比例），且你的子容器内容非常少，导致很难触发换行让你误以为换行失效。所以你只需要设置最小宽度即可看到效果。
2.wrap与你设置的子元素flex无关，只要一行宽度不足以容纳就会自动换行，并不会失效。

问题2：没有设置子元素flex：1时在flex-direction: row;时能换行，

分析解答：
1.不设置flex:1时，意味着子元素宽度自动，即你设置的父容器宽度（100%）。这时你可以清楚看到换行，是因为每一行，都由1个100%宽度的子元素构成。
2.这个效果实际上用flex-direction: column;也能实现而且更加简单（前提是如果你的需求是想做垂直列的话）。