css - Sencha 触摸 2 : 3 containers: stick to the left (fixed width) + stick to the right (fixed width) +middle (the rest)

Question

水平对齐三个容器的最佳方式是什么？左侧容器宽度为 3em，右侧容器宽度为 3em，中间容器宽度为其余宽度？

layout:{
    type : 'hbox',
    pack : 'center'
},

items:[
{/*3em*/
xtype:'container',
cls:'left',
html:'left text',
},
{
xtype:'container',
cls:'middle',
html:'middle text',
},
{/*3em*/
xtype:'container',
cls:'right',
html:'right text',
},
]

我很好奇我是否最好使用纯 css float:left;、float:right; 和 overflow:hidden; ，或者可以使用 flex 来达到这个目的？

Answer 1

如果您在两侧容器上设置了固定宽度，则可以在中心容器上设置 flex: 1。但是你已经在那里了，我看不出是什么阻碍了你？

编辑:

Touch 接受 'em' 作为容器的宽度选项(而 Ext4 不接受)，所以我真的会避免使用 CSS 来定位子项(或者完全放弃容器，因为那样会使它无能为力)。

根据我的测试，以这种方式更新您的代码可以解决问题:

    layout: {
        type: 'hbox'
        ,pack: 'center'
    }

    ,defaultType: 'container'

    ,items: [{
        html: 'Left'
        ,width: '3em'
        ,style: 'background: pink;' // just to materialize the container
    },{
        html: 'Center'
        ,flex: 1
    },{
        html: 'Right'
        ,width: '3em'
        ,style: 'background: pink;'
    }]