Fittables
Fittable包帮助你创建布局更合理的使用可用空间（app都有这样的布局需求，但使用以前的web技术很难做到这一点）。个人观点，现在移动Web开发框架中有很多都支持自适应布局，如senchatouch，但是enyo的这种方式在创建复杂的页面时依旧很容易实现。
FittableColumns and FittableRows
FittableColumns 和FittableRows control 使你可以定义视图的各子部分的行列布局。在一个view中你可以使用可用空间来扩展一个child，而它的兄弟保留原来的大小样式。
要标记一个child control的大小范围，须将它的fit属性设置为true，例如：
enyo.kind({
kind: "FittableColumns",
components: [
{content: "1"},
{content: "2", fit: true},
{content: "3"}
]
});
FittableColumnsLayout and FittableRowsLayout
另一种使用fittable布局策略的方法是将kind的layoutkind属性设置为"FittableColumnsLayout" 或 "FittableRowsLayout"：
enyo.kind({
kind: enyo.Control,
layoutKind: "FittableColumnsLayout",
components: [
{content: "1"},
{content: "2", fit: true},
{content: "3"}
]
});
FittableColumnsLayout和FittableRowsLayout都是直接从 enyo.FittableLayout继承来的（ 它提供了基本的定位和边界逻辑）
Nested Fittables
由于需要，fittable view有时需要嵌套，如下例：
enyo.kind({
name: "NestedFittablesExample",
kind: "FittableRows",
components: [
{content: "Top", allowHtml: true, classes: "outer-box"},
{content: "Middle", allowHtml: true, classes: "outer-box"},
{kind: "FittableColumns", fit: true, classes: "outer-box", components: [
{content: "Left", classes: "inner-box"},
{content: "Fits!", fit: true, classes: "inner-box"},
{content: "Right", classes: "inner-box"}
]}
]
});
出于完整性，给出css样式：
.outer-box {
border: 2px solid orange;
padding: 4px;
white-space: nowrap;
overflow: hidden;
margin-top: 3px;
margin-bottom: 3px;
}
.inner-box {
border: 2px solid lightblue;
padding: 4px;
white-space: nowrap;
overflow: hidden;
margin: 2px;
}
Parting Thoughts
如果你认为fittables听起来很像一个有限的版本的CSS灵活箱模型,你是对的。我们的主要目标是提供一种功能像Flex并且跨浏览器的fittables布局模型。我们也要让尽可能少的限制在CSS样式的子组件,并谨慎使用JavaScript(我们使用它来计算fittable高度的元素，否则将由浏览器来决定布局样式)。
我们想强调,你应该只使用fittables当你需要视图来扩张和收缩来适合可用的空间。如果你只是想安排元素水平或垂直,你最好使用标准的Web布局技术。
你可以在Sampler app 中看到enyo fittables自适应布局的一些示例程序。你也可以在enyo的解压包lib\layout\fittable\samples下找到一些示例并查看完整的代码。
