V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
andyskaura
V2EX  ›  前端开发

关于 flex 布局的困惑

  •  
  •   andyskaura · 208 天前 · 1903 次点击
    这是一个创建于 208 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现象是 flex 轴线上始终只能有一个元素,导致区域填不满,有没有什么好的方法指点一下。 要求 只用一个 flex 盒子,需要 item 的 order 做排序。

    在线编辑: https://codesandbox.io/p/sandbox/test-flex-9j8psr

    13 条回复    2024-07-04 07:56:16 +08:00
    andyskaura
        1
    andyskaura  
    OP
       208 天前
    liuhuihao
        2
    liuhuihao  
       208 天前
    用 float ,别用 flex
    dongtingyue
        3
    dongtingyue  
       208 天前
    1 和 2 是同一行。。。。
    EJW
        4
    EJW  
       208 天前
    2 和 3 写在一个 div 里?
    iOCZS
        5
    iOCZS  
       208 天前
    flex 不支持瀑布流
    Drool
        6
    Drool  
       208 天前
    感觉 grid 更方便
    codehz
        7
    codehz  
       208 天前
    首先 grid layout 也支持 order...
    MRG0
        8
    MRG0  
       208 天前
    我正在做这个玩意,flex 无解,高度较小的 div 会独占那个空间,不能往下在塞东西,要么 grid ,要么 Vue Grid Layout
    codehz
        10
    codehz  
       208 天前
    <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    </div>
    你这种布局用 grid 几秒搞定
    .container {
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 1fr;
    }

    .item:first-child {
    grid-row: 1 / span 2;
    }
    .item {
    box-shadow: 0 0 0 1px black;
    }

    order 也可以改顺序,不过这时候就不能用 first-child 来选择了,你需要自己在 order 为 1 的时候设置 grid row 的属性
    andyskaura
        11
    andyskaura  
    OP
       208 天前
    @Drool
    @codehz
    @MRG0
    @codehz #10

    都忘了还有 grid 布局了,一直都是 flex 梭哈的,第一次遇到 flex 解决不了的情况。感谢各位哈,
    Al0rid4l
        12
    Al0rid4l  
       208 天前
    flex 是一维的, 要么 float 要么 grid
    jaminq
        13
    jaminq  
       173 天前 via iPhone
    flex 只有一根轴,grid 两根
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1289 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 17:44 · PVG 01:44 · LAX 09:44 · JFK 12:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.