FlexFlex布局

Flex 是 CSS flex 布局的一个封装。

代码演示

基本用法

基础使用

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'demo-flex-basic',
  4. template: `
  5. <div class="flex-container">
  6. <div className="sub-title">Basic</div>
  7. <Flex>
  8. <FlexItem>
  9. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  10. </FlexItem>
  11. <FlexItem>
  12. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  13. </FlexItem>
  14. </Flex>
  15. <br>
  16. <Flex>
  17. <FlexItem>
  18. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  19. </FlexItem>
  20. <FlexItem>
  21. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  22. </FlexItem>
  23. <FlexItem>
  24. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  25. </FlexItem>
  26. </Flex>
  27. <br>
  28. <Flex>
  29. <FlexItem>
  30. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  31. </FlexItem>
  32. <FlexItem>
  33. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  34. </FlexItem>
  35. <FlexItem>
  36. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  37. </FlexItem>
  38. <FlexItem>
  39. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  40. </FlexItem>
  41. </Flex>
  42. <br>
  43. <div className="sub-title">Wrap</div>
  44. <Flex [wrap]="'wrap'">
  45. <div class="placeholder inline">Block</div>
  46. <div class="placeholder inline">Block</div>
  47. <div class="placeholder inline">Block</div>
  48. <div class="placeholder inline">Block</div>
  49. <div class="placeholder inline">Block</div>
  50. <div class="placeholder inline">Block</div>
  51. <div class="placeholder inline">Block</div>
  52. </Flex>
  53. <div className="sub-title">Align</div>
  54. <Flex [justify]="'center'">
  55. <div class="placeholder inline">Block</div>
  56. <div class="placeholder inline">Block</div>
  57. <div class="placeholder inline">Block</div>
  58. </Flex>
  59. <br>
  60. <Flex [justify]="'end'">
  61. <div class="placeholder inline">Block</div>
  62. <div class="placeholder inline">Block</div>
  63. <div class="placeholder inline">Block</div>
  64. </Flex>
  65. <br>
  66. <Flex [justify]="'between'">
  67. <div class="placeholder inline">Block</div>
  68. <div class="placeholder inline">Block</div>
  69. <div class="placeholder inline">Block</div>
  70. </Flex>
  71. <br>
  72. <Flex [align]="'start'">
  73. <div class="placeholder inline">Block</div>
  74. <div class="placeholder inline small">Block</div>
  75. <div class="placeholder inline">Block</div>
  76. </Flex>
  77. <br>
  78. <Flex [align]="'end'">
  79. <div class="placeholder inline">Block</div>
  80. <div class="placeholder inline small">Block</div>
  81. <div class="placeholder inline">Block</div>
  82. </Flex>
  83. <br>
  84. <Flex [align]="'baseline'">
  85. <div class="placeholder inline">Block</div>
  86. <div class="placeholder inline small">Block</div>
  87. <div class="placeholder inline">Block</div>
  88. </Flex>
  89. </div>
  90. <ng-template #placeHolder>
  91. <div class="placeholder">Block</div>
  92. </ng-template>
  93. `,
  94. styles: [
  95. `
  96. .flex-container {
  97. margin: 0 15px;
  98. }
  99. .inline {
  100. width: 80px !important;
  101. margin: 9px 9px 9px 0;
  102. }
  103. .small {
  104. height: 20px !important;
  105. line-height: 20px !important;
  106. }
  107. .sub-title {
  108. color: #888;
  109. font-size: 14px;
  110. padding: 30px 0 18px 0;
  111. }
  112. .placeholder {
  113. background-color: #ebebef;
  114. color: #bbb;
  115. text-align: center;
  116. height: 30px;
  117. line-height: 30px;
  118. width: 100%;
  119. }
  120. `
  121. ]
  122. })
  123. export class DemoFlexBasicComponent {}

FlexFlex 布局 - 图1

API

Flex

属性说明类型默认值
direction项目定位方向,值可以为 row,row-reverse,column,column-reverseStringrow
wrap子元素的换行方式,可选nowrap,wrap,wrap-reverseStringnowrap
justify子元素在主轴上的对齐方式,可选start,end,center,between,aroundStringstart
align子元素在交叉轴上的对齐方式,可选start,center,end,baseline,stretchStringcenter
alignContent有多根轴线时的对齐方式,可选start,end,center,between,around,stretchStringstretch

Flex.Item

Flex.Item 组件默认加上了样式flex:1,保证所有 item 平均分宽度, Flex 容器的 children 不一定是 Flex.Item