自适应 && 等分 flex 【angular flexLayout】CSS

需求：

 

<div>
  <div fxLayout="row" fxFlex="15">圆圈</div>
  <div fxLayout="row" fxFlexOffset="35">标题</div>
  因为15+35=50，所以标题会居中
</div>

---

 html:

<div class="image-multi-wrapper" fxFlex fxFlexAlign="stretch">
  <div class="model-multi" fxLayout="row" fxLayoutAlign="start stretch" fxFlex>
    <!-- <ng-container *ngFor="let id of imageIds$ | async"> -->
    <div [ngClass]="isfullSize ? 'fullSize' : 'halfSize'">
      <!-- <app-image-tomo [id]="id" (click)="select(id)" [normalSize]="widthLayout ? oneSize : fourSize"></app-image-tomo> -->
    </div>
    <!-- </ng-container> -->
  </div>
</div>

less:

@import 'theme.less';

@halfSize-margin: 0 4px 4px 0;

.image-multi-wrapper {
  overflow: auto;
}

.model-multi {
  flex-wrap: wrap;
}

.halfSize {
  width: 50%;
  height: 50%;
  margin: 0 4px 4px 0;
  border: 1px solid @line-border;
  background-color: gray; // temp
}

.fullSize {
  width: 100%;
  height: 100%;
  border: 1px solid @line-border; // temp
  background-color: gray; // temp
}

 

扩展：

目前主流浏览器不支持 box-flex 属性。

Internet Explorer 10 通过私有属性 the -ms-flex 支持.

Firefox通过私有属性 -moz-box-flex 支持.

Safari和Chrome通过私有属性 -webkit-box-flex 支持.