FlexFlex布局

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

代码演示

基本用法

基础使用

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