css - Sencha Touch 2：3个容器：贴左（定宽）+贴右（定宽）+中间（其余）

Question

什么是水平对齐三个容器的最佳方法，左侧容器的宽度为 3em，右侧容器的宽度为 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;'
    }]