-
Notifications
You must be signed in to change notification settings - Fork 1
BLFlexView
Colormark edited this page Nov 8, 2015
·
2 revisions
增加class: bl-flexview, 框架会自动将该节点格式化为BLFlexView.
父节点下的子节点增加class: bl-flex-*，会被认为是子节点，父节点的下级子节点都必须增加这个class，否则效果会出现异常。
子节点样式列表：
| 样式 | 说明 |
|---|---|
| bl-flex-auto | 自动宽度 |
| bl-flex-1 | 父节点宽度的 10% |
| bl-flex-2 | 父节点宽度的 20% |
| bl-flex-3 | 父节点宽度的 30% |
| bl-flex-4 | 父节点宽度的 40% |
| bl-flex-5 | 父节点宽度的 50% |
| bl-flex-618 | 父节点宽度的 61.8%，黄金分割 |
** 超过50%的建议使用bl-flex-auto
我们发现，移动APP中，会大量使用card，而card设计中大量使用垂直居中，相比之下css3 flex-box并不使用，所以我们使用了display table及table-cell代替了flex-box
我们默认使用了垂直居中。
当然你可以在父节点中使用样式bl-flexview-valign-top(顶部对齐)及bl-flexview-valign-bottom（底部对齐）来修正。
默认没有使用边距。
你可以在父节点中使用样式：
| 样式 | 说明 |
|---|---|
| bl-flexview-padding-h-sm | 微微一些左右边距 |
| bl-flexview-padding-h | 一些左右边距 |
| bl-flexview-padding-h-lg | 较大的左右边距 |
暂不支持垂直边距，或者可以说，我们认为垂直边距并没有价值