【CSS】flex布局 - 左边超过打点, 右边完整展示

快来打我* 2022-11-08 16:18 216阅读 0赞

场景：宽度一定的情况下右边自适应，左边被挤压。

需要的效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70]  
flex 的三个参数分别对应：flex-grow、flex-shrink、flex-basis。

*  flex-grow：定义项目的放大比例，默认为0。即如果存在剩余空间，也不放大。
 *  flex-shrink：定义项目的缩小比例，默认为1。即如果空间不足，该项目将缩小。
 *  flex-basis：定义在分配多余空间之前，项目占据的主轴空间。

**简单说，左边的设置flex: 0 1 auto; 右边的设置flex: 0 0 auto;**

直接上Demo：

<!DOCTYPE html>
    <html lang="en">
     
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .parent {
          background-color: lightgrey;
          padding: 10px 0;
          display: flex;
          max-width: 410px;
          margin-bottom: 2px;
        }
     
        .less-important {
          background-color: lightpink;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 5px;
          flex: 0 1 auto;
        }
     
        .more-important {
          background-color: lightgreen;
          white-space: nowrap;
          padding: 0 5px;
          flex: 0 0 auto;
        }
      </style>
    </head>
     
    <body>
      <div class="parent">
        <div class="less-important">Truncate this text because it is less important</div>
        <div class="more-important">The important text</div>
      </div>
     
      <div class="parent">
        <div class="less-important">No ellipsis</div>
        <div class="more-important">Important stuff</div>
      </div>
     
      <div class="parent">
        <div class="less-important">Less important content</div>
        <div class="more-important">Way more important info that will cause ellipsis</div>
      </div>
    </body>
     
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70]: /images/20221023/4b0a649b30a84de390e044411ec4f601.png