flex 布局

| 代码 | 20 views

浏览器版本支持

  • 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 组件

| 代码 | 14 views

添加组件

  • 命令行 

    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 方法

| 代码 | 17 views

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