布局

Flexbox

chameleon 布局模型基于 CSS Flexbox，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。

Flexbox 包含 flex 容器和 flex 成员项。如果一个 chameleon 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。

Flex 容器

在 chameleon 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。

  • flex-direction：

定义了 flex 容器中 flex 成员项的排列方向。可选值为 row | column，默认值为 column

  • column：从上到下排列。
  • row：从左到右排列。
    • justify-content：

定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 flex-start | flex-end | center | space-between，默认值为 flex-start。

  • flex-start：是默认值，所有的 flex 成员项都排列在容器的前部；
  • flex-end：则意味着成员项排列在容器的后部；
  • center：即中间对齐，成员项排列在容器中间、两边留白；
  • space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    布局 - 图1
  • align-items：

定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。

  • stretch： 是默认值，即拉伸高度至 flex 容器的大小；
  • flex-start： 则是上对齐，所有的成员项排列在容器顶部；
  • flex-end： 是下对齐，所有的成员项排列在容器底部；
  • center： 是中间对齐，所有成员项都垂直地居中显示。
  • baseline： 项目的第一行文字的基线对齐。布局 - 图2
    • flex-flow

说明:

  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性, 用于设置或检索弹性盒模型对象的子元素排列方式。
  • flex-direction 属性规定灵活项目的方向。
  • flex-wrap 属性规定灵活项目是否拆行或拆列。
    语法:
  1. flex-flow: flex-direction flex-wrap;

Flex 成员项

flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间. 如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的2倍。

  • flex {number}：值为 number 类型。

示例

一个简单的网格布局。

  1. <template>
  2.   <view>
  3.     <view c-for="{{list}}" c-for-index="i" c-for-item="item" class="row">
  4.       <view c-for="{{item}}" c-for-index="k" c-for-item="text" class="item">
  5.         <view>
  6.           <text>{{text}}</text>
  7.         </view>
  8.       </view>
  9.     </view>
  10.   </view>
  11. </template>
  12. <script>
  13. class Index {
  14.   data = {
  15.     list: [
  16.       ['A', 'B', 'C'],
  17.       ['D', 'E', 'F'],
  18.       ['G', 'H', 'I']
  19.     ]
  20.   }
  21. }
  22. export default new Index();
  23. </script>
  24. <style scoped>
  25.   .item{
  26.     flex:1;
  27.     justify-content: center;
  28.     align-items:center;
  29.     border-width:1;
  30.   }
  31.   .row{
  32.     flex-direction: row;
  33.     height:80cpx;
  34.   }
  35. </style>
  36. <script cml-type="json">
  37. {
  38.   "base": {}
  39. }
  40. </script>

定位

chameleon 支持 position 定位，用法与 CSS position 类似。为元素设置 position 后，可通过 top、right、bottom、left 四个属性设置元素坐标。

  • position {string}：

设置定位类型。可选值为 relative | absolute | fixed | sticky，默认值为 relative。

  • relative 是默认值，指的是相对定位；
  • absolute 是绝对定位，以元素的容器作为参考系；
  • fixed 保证元素在页面窗口中的对应位置显示；
  • sticky 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。
    • top {number}：距离上方的偏移量，默认为 0。
    • bottom {number}：距离下方的偏移量，默认为 0。
    • left {number}：距离左方的偏移量，默认为 0。
    • right {number}：距离右方的偏移量，默认为 0。

示例

  1. <template>
  2.   <view class="wrapper">
  3.     <view class="box box1">
  4.     </view>
  5.     <view class="box box2">
  6.     </view>
  7.     <view class="box box3">
  8.     </view>
  9.   </view>
  10. </template>
  11. <script>
  12. class Index {
  13. }
  14. export default new Index();
  15. </script>
  16. <style>
  17. .wrapper {
  18.   position: absolute;
  19.   top: 0;
  20.   right: 0;
  21.   bottom: 0;
  22.   left: 0;
  23.   background-color: #cccccc;
  24. }
  25. .box {
  26.   width: 400cpx;
  27.   height: 400cpx;
  28.   position: absolute;
  29. }
  30. .box1 {
  31.   top: 0;
  32.   left: 0;
  33.   background-color: #ff0000;
  34. }
  35. .box2 {
  36.   top: 150cpx;
  37.   left: 150cpx;
  38.   background-color: #0055dd;
  39. }
  40. .box3 {
  41.   top: 300cpx;
  42.   left: 300cpx;
  43.   background-color: #00ff49;
  44. }
  45. </style>
  46. <script cml-type="json">
  47. {
  48.   "base": {}
  49. }
  50. </script>