• FlexFlex布局
    • 代码演示
    • API
      • Flex
      • Flex.Item

    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