title: Sencha Touch 2: 3 containers: stick to the left (fixed width) + stick to the right (fixed width) +middle (the rest)
body: <p>What's the best way to align three containers horizontally of the width of 3em for the left container and 3em for the right container and the rest width for the middle one?</p>
  
  <pre><code>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',
  },
  ]
  </code></pre>
  
  <p>I'm curious if I'd better use pure css <code>float:left;</code>, <code>float:right;</code> and <code>overflow:hidden;</code>, or it is possible to use <code>flex</code> for this purpose?</p>