flex 左右固定自适应和溢出处理

男娘i 2023-07-21 06:00 30阅读 0赞

这个东西多看看代码就可以了

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    .footer { 
      width: 300px;
      height: 20px;
      display: flex;
      border: 1px solid #000;
    }
    .count { 
      background: #3cc8b4;
      flex: 1 1 auto;/*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。*/
      width: 50px;
    }
    .icon { 
      flex-grow: none; /*icon设置为固定元素，不会自适应增长*/
      background: green;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 50px;
    }
    .title-container { 
      background: #9bc;
      max-width: 200px;
    }
    .title { 
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    </style>
    </head>
    <body>
    	<div class="footer">
    	  <div class="title-container">
    		<div class="title">
    		  rig323ssswwwwwwwwwwwwww
    		</div>
    	  </div>
    	   <div class="count">
    		(124)
    	  </div>
    	  <div class="icon">
    		>12334
    	  </div>
    	</div>
    </body>
    </html>

这个也是一个经典的案例：

.footer { 
      width: 300px;
      height: 20px;
      display: flex;
      overflow: hidden;
    }
    .left { 
      background: #3cc8b4;
      flex: 1 1 auto; /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。*/
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 50px;
    }
    .right { 
      background: #9bc;
      max-width: 250px;
    }
    .right-ellipsis { 
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
     
    <div class="footer">
       <div class="left">
         leftleftleftleftleftleftleftleftleftleftleftleftleft
      </div>
      <div class="right">
        <div class="right-ellipsis">
          rightrightrightrightrightrightrightrightright
        </div>
      </div>
    </div>

基本上以上两个案例搞懂了，内容固定，自适应，溢出都可以应对自如了

再来一个简单一点的案例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1{ 
                display: flex;
                flex-flow: row nowrap;
                width:400px;
                height:60px;
                line-height:60px;
                margin:400px auto;
                background-color:green;
                border:1px solid #000;
            }
            .div2{ 
                height:60px;
                background-color:orange;
                border:1px solid green;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                box-sizing:border-box;
                padding-right:5px;
            }
            .div3{ 
                height:60px;
                background-color:pink;
                border:1px solid red;
                box-sizing:border-box;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">wearethechampion,youarefiredhdhfoiasoidfoiahsiodufiousahdfo hio</div>
            <div class="div3">(122)</div>
        </div>
    </body>
    </html>

效果如下图：

![在这里插入图片描述][20200508180313164.png]

[20200508180313164.png]: /images/20230528/2e64f2506fe64e9ea394b851659bd4d7.png