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

今天药忘吃喽~ 2023-06-30 10:48 45阅读 0赞

需求：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

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

--------------------

html:

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 支持.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200317170141522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24=,size_16,color_FFFFFF,t_70