当前位置：文江博客话题详情

JavaScript CSS Flex

flex如何实现这种布局？

发布于 2022-09-11 21:35:03 字数 135 浏览 39 评论 0

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

疯狂的代价 2022-09-18 21:35:03

大 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>

她比我温柔 2022-09-18 21:35:03

我还以为自己很熟悉flex布局了，直到看到了你的这个问题。

flex 要么分行，要么分列，像这种没行没列的，不拆分成几个小容器应该是没办法的。。。

从来不烧饼 2022-09-18 21:35:03

<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是流式布局，所以可以通过限制最外框高度，达到不人为写成两列而是自动分为两列，不知道符不符合楼主的要求。

仔细一想不加margin的话分了列后中间的间隔还是不行。
图片描述

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文