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。但是你已经在那里了，我不知道是什么阻挡了你？

编辑：

触摸接受＆＃39; em＆＃39;作为容器的宽度选项（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;'
    }]

Sencha Touch 2：3容器：粘在左边（固定宽度）+粘在右边（固定宽度）+中间（其余部分）

1 个答案: