V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pinews
V2EX  ›  设计

flex 项目的 flex 属性为什么只对横轴有效呢,为什么没有相应的纵轴属性呢?

  •  
  •   pinews · 2018-09-29 15:02:24 +08:00 · 3583 次点击
    这是一个创建于 2253 天前的主题,其中的信息可能已经有所发展或是发生改变。
    真诚请教,justify-content 可以让 flex 项目有相应的对齐方式,但我想模拟对齐效果,在原来的 flex 项目前后加入空白的项目,然后用 flex 属性控制,但是在纵轴上却无能为力,因为 flex 属性只对横轴有效,请问有没有较好的解决办法,因为用 flex 套 flex 的用法在一些情况下不太合适。谢谢。
    第 1 条附言  ·  2018-10-01 16:50:12 +08:00
    我所说的是为了重新设计游戏淘汰赛赛程的效果
    如下
    http://www.dota2.com/international/standings/
    7 条回复    2018-10-01 16:47:15 +08:00
    des
        1
    des  
       2018-09-29 15:31:16 +08:00 via Android
    justify-content 设置主轴对齐
    align-items 设置侧轴对齐

    如果你想要嵌套 flex 的那种效果,请使用 grid 布局
    binaryify
        2
    binaryify  
       2018-09-29 15:51:59 +08:00
    flex-direction: column
    Jackliu
        3
    Jackliu  
       2018-09-29 16:01:23 +08:00
    flex-direction
    Edwards
        4
    Edwards  
       2018-09-29 16:28:54 +08:00
    你需要先确定主轴和交叉轴这个东西,
    取决于 flex-direction。justify-content 指的是主轴方向的排布,align-item 指的是交叉轴上的排布
    yggd
        5
    yggd  
       2018-09-29 16:39:48 +08:00
    pinews
        6
    pinews  
    OP
       2018-09-29 17:01:47 +08:00
    @binaryify
    @Jackliu
    @Edwards 横轴我已经用了,用了 flex-direction: column,原来的横轴就不能用了,结果是一样的。
    pinews
        7
    pinews  
    OP
       2018-10-01 16:47:15 +08:00
    @des 对齐我只是举例,我想说的是 flex,flex 方向默认是从左至右的,也可以先从上至下然后从左至右,请问 grid 怎么实现这个效果?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3200 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:14 · PVG 08:14 · LAX 16:14 · JFK 19:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.