需求:
<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 支持.