• 布局样式
    • Flex布局
      • 弹性盒子
      • 布局方向
      • 对齐方式

    布局样式

    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. }