布局样式

Weex支持盒模型和Flexbox布局，都是基于CSS的标准来实现的，但远没有传统CSS那么灵活和好用，也许是受限于android 和iOS 平台原生层面布局能力的影响。在使用 buiweex的 样式之前，请先了解 【通用样式】 【文本样式】

Flex布局

弹性盒子

框架提供了一组class，分别是 flex1 ~ flex12,定义 flex成员可以占用容器剩余空间的大小。注意区别于web层面的12栅格布局，这里仅仅是 原生层面 布局权重(layout_weight)的概念。如下图：

布局样式 - 图1   布局样式 - 图2

  1. <div>
  2.     <div class="flex1"></div>
  3.     <div class="flex1"></div>
  4. </div>

以上代码表示每个成员项占用 一半的空间。

  1. <div>
  2.     <div class="flex1"></div>
  3.     <div class="flex2"></div>
  4.     <div class="flex3"></div>
  5. </div>

以上代码表示将父亲容器分成5等分，分别占用1份，2份，3份。

布局方向

框架提供了 flex-row 和 flex-cloumn 来控制flex布局方向。另外，也可以通过flex-fluid 来达到自动换行（流式布局）的效果。

felx-row: 从左到右排列,主轴是横向

  1. <div class="flex-row">
  2.     <div class="flex1"></div>
  3.     <div class="flex1"></div>
  4.     <div class="flex1"></div>
  5. </div>

felx-column: 从上到下排列，主轴是纵向

  1. <div class="flex-column">
  2.     <div class="flex1"></div>
  3.     <div class="flex1"></div>
  4.     <div class="flex1"></div>
  5. </div>

flex-fluid: 流式布局,通常成员项是固定宽度

  1. <div class="flex-row flex-fluid">
  2.     <div class="ma"></div>
  3.     <div class="ma"></div>
  4.     <div class="ma"></div>
  5.     <div class="ma"></div>
  6.     <div class="ma"></div>
  7. </div>
  9. <style>
  10. .ma{
  11.     width:200px;
  12.     height:100px;
  13.     margin-right:30px;
  14.     background-color: red;
  15. }
  16. </style>

对齐方式

框架提供了一组class，用于进行布局对齐：

居中对齐

  1. .center{
  2.   justify-content: center;
  3.   align-items: center;
  4. }

纵向布局

  1. .column-center-top{
  2.   align-items: center;
  3. }
  4. .column-center-bottom{
  5.   justify-content: flex-end;
  6.   align-items: center;
  7. }
  8. .column-center-left{
  9.   justify-content: center;
  10.   align-items: flex-start;
  11. }
  12. .column-center-right{
  13.   justify-content: center;
  14.   align-items: flex-end;
  15. }
  16. .column-left-top{
  17.   justify-content: flex-start;
  18.   align-items: flex-start;
  19. }
  20. .column-right-top{
  21.   justify-content: flex-start;
  22.   align-items: flex-end;
  23. }
  24. .column-left-bottom{
  25.   justify-content: flex-end;
  26.   align-items: flex-start;
  27. }
  28. .column-right-bottom{
  29.   justify-content: flex-end;
  30.   align-items: flex-end;
  31. }
  32. .row-space-between{
  33.   justify-content: space-between;
  34.   align-items: center;
  35. }

横向布局

  1. .row-center-top{
  2.   justify-content:center;
  3.   align-items: flex-start;
  4. }
  5. .row-center-bottom{
  6.   justify-content: center;
  7.   align-items: flex-end;
  8. }
  9. .row-center-left{
  10.   justify-content: flex-start;
  11.   align-items: center;
  12. }
  13. .row-center-right{
  14.   justify-content: flex-end;
  15.   align-items: center;
  16. }
  17. .row-left-top{
  18.   justify-content: flex-start;
  19.   align-items: flex-start;
  20. }
  21. .row-right-top{
  22.   justify-content: flex-end;
  23.   align-items: flex-start;
  24. }
  25. .row-left-bottom{
  26.   justify-content: flex-start;
  27.   align-items: flex-end;
  28. }
  29. .row-right-bottom{
  30.   justify-content: flex-end;
  31.   align-items: flex-end;
  32. }