flex如何实现这种布局，前提是不拆分成两列，不使用flex范围以外的css属性，比如margin-top: -xxpx

我还以为自己很熟悉flex布局了，直到看到了你的这个问题。 flex 要么分行，要么分列，像这种没行没列的，不拆分成几个小容器应该是没办法的。。。

flex如何实现这种布局？

大 flex 里单独套小的 flex
先拆左右，1 3 5 在大 flex 的左边，2 4 在大flex的右边
1 3 5 自己弄个 flex
2 4 自己弄个 FLEX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex</title>
    <style>
    * {font-size:36px;}
    .flex-row {display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;}
    .flex-row > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
    .flex-row > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}

    .flex-column {display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;}
    .flex-column > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
    .flex-column > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}
    </style>
</head>
<body>
<div class="flex-row">
    <div class="flex-main flex-column">
        <div class="flex-main" style="background-color:rgba(255,0,0,0.5)">
            1<br />1<br />1<br />1<br />1
        </div>
        <div class="flex-side flex-row">
            <div class="flex-main" style="background-color:rgba(0,255,0,0.5)">
                3
            </div>
            <div class="flex-main" style="background-color:rgba(0,0,255,0.5)">
                5
            </div>
        </div>
    </div>
    <div class="flex-main flex-column">
        <div class="flex-side" style="background-color:rgba(255,255,0,0.5)">
            2
        </div>
        <div class="flex-main" style="background-color:rgba(255,0,255,0.5)">
            4<br />4<br />4<br />4
        </div>
    </div>
</div>
</body>
</html>

<div class="wrap flex"> <div>1</div> <div class="flex"> <div>3</div> <div>5<div> </div> <div>2</div> <div>4</div> </div> <style> .flex:{ display:flex; justify-content:space-between; } .wrap:{ flex-direction:column; flex-wrap:wrap; height:xxxx(最外框限制高度); } .wrap div{ flex:0; }

flex如何实现这种布局？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？