兼容ie10及以上，谷歌等的等高flex自适应写法

谁借莪１个温暖的怀抱￠ 2023-06-23 10:59 29阅读 0赞

> 单纯的只有一层的话很简单好写，display:table也可以，以下为 li （只是个例子标签，不重要）下面多个几层还能实现其它自适应，小细节忽略

*{
    				padding: 0;
    				margin: 0;
    				box-sizing: border-box;
    			}
    			.wt50{
    				width:50%;
    			}
    			.wd135{
    				width:135px;
    			}
    			.wdfu135{
    				width:calc(100% - 135px);
    			}
    
    			.auto-list{
    				border: 1px solid #eae7e7;
    				min-height: 42px;
    				display: flex;
    				align-items: stretch;
    				display: -ms-flexbox;
    				-ms-flex-align: stretch;
    				width: 100%;
    			}
    			.auto-list>li{
    				float: left;
    				border-right: 1px solid #eae7e7;
    				display: flex;
    				align-items: stretch;
    				display: -ms-flexbox;
    				-ms-flex-align: stretch;
    			}
    			.auto-list>li .flex-item{
    				min-height: 100%;
    				max-width: 100%;
    				display: flex;
    				align-items: stretch;
    				display: -ms-flexbox;
    				-ms-flex-align: stretch;
    			}
    			.auto-list>li .cen-tag{
    				width: 100%;
    				word-break: break-all;
    			}
    			.auto-list .f-item{
    				font-size: 15px;
    				font-weight: bold;
    				border-right: 1px solid #eae7e7;
    				float: left;
    				line-height: 20px;
    				text-align: center;
    				display: flex;
    				align-items: center;
    				justify-content: center;
    				display: -ms-flexbox;
    				-ms-flex-pack: center;
    				-ms-flex-align: center;
    				min-height: 41px;
    			}

<div style="padding: 50px;">
    			<ul class="auto-list">
    			   <li class="wt50">
    				   <div class="f-item wd135">
    					   <div class="cen-tag">
    						   测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    					   </div>
    				   </div>
    				   <div class="f-item wdfu135">
    					   <div class="cen-tag">
    						   测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    					   </div>
    				   </div>
    			   </li>
    			   <li class="wt50">
    				   <div class="f-item wd135">
    					   <div class="cen-tag">
    						   测试文字测试文字测试文字测试文字测试文字
    					   </div>
    				   </div>
    				   <div class="f-item wdfu135">
    					   <div class="cen-tag">
    						   测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    					   </div>
    				   </div>
    			   </li>
    			</ul>
    			<ul class="auto-list">
    			   <li class="wt50">
    				   <div class="f-item wd135">
    					   <div class="cen-tag">
    						   测试文字测试文字测试文字测试文字测试文字测试文字
    					   </div>
    				   </div>
    				   <div class="f-item wdfu135">
    					   <div class="cen-tag">
    						   测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    					   </div>
    				   </div>
    			   </li>
    			   <li class="wt50">
    				   <div class="f-item wd135">
    					   <div class="cen-tag">
    						   测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    					   </div>
    				   </div>
    				   <div class="f-item wdfu135">
    					   <div class="cen-tag">
    						   测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    					   </div>
    				   </div>
    			   </li>
    			</ul>
    		</div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]

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