分类:代码

码农是第一生产力。

flex 布局

浏览器版本支持

  • chrome 21, opera 12.1, firefox 22, safari 6.1, ie 10

指定 flex 布局

  • 块元素 display: flex;
  • 行内元素 display: inline-flex;
  • webkit 内核 display: -webkit-flex display: -webkit-inline-flex
  • 影响设置 flex 而已后, float , clear , vertcal-align 都失效

窗口属性

  • flex-direction row | row-reverse | column | column-reverse
  • flex-wrap nowrap | wrap | wrap-reverse
  • flex-flow <flex-direction> || <flex-wrap>
  • justify-content flex-start | flex-end | center | space-between | space-around
  • align-items flex-start | flex-end | center | baseline | stretch
  • align-content flex-start | flex-end | center | space-between | space-around | stretch

元素属性

  • order <integer>
  • flex-grow <number> /*default 0*/
  • flex-shrink <number> /*default 0*/
  • flex-basis <number | auto /*default auto*/
  • flex none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
  • align-self auto | flex-start | flex-end | center | baseline | stretch

angular2 学习笔记(2)- 添加 material 组件

添加组件

  • 命令行

    npm install --save @angular/material material-design-icons @angular/animations @angular/flex-layout hammerjs
    
    

添加配置

  • app.module.ts

    imports: [    
      ...
      BrowserAnimationsModule,
      MdToolbarModule, MdButtonModule, MdMenuModule, MdIconModule,
      FlexLayoutModule,
    ],
    
  • style.css

    @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
    
    /* fallback */
    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2');
    }
    
    .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }
    

测试页面

  • html demo

    <md-toolbar color="primary">
      <button md-icon-button [mdMenuTriggerFor]="menu1">
        <md-icon>more_vert</md-icon>
      </button>
      <md-menu #menu1="mdMenu">
        <button md-menu-item>
          <md-icon>fingerprint</md-icon>
          <span>Login</span>
        </button>
        <button md-menu-item disabled>
          <md-icon>annoucement</md-icon>
          <span>Issues</span>
        </button>
        <button md-menu-item>
          <md-icon>notifications_off</md-icon>
          <span>No Alerts</span>
        </button>
      </md-menu>
      <span>fj's blog</span>
    </md-toolbar>
    

win10 安装 vs2010 vs2015 BuildTools 方法

Qt 开发需要 VC 编译器,又不想安装 VC 全家桶,可以只安装 BuildTools。