一、
要实现justify-content:between-space的效果，同时要保证中间一列左对齐。没能直接实现，采用下面方式实现了。
<!DOCTYPE html>
<html>
<head>
<style>
.row{
display:flex;
width: 900px; //如果页面缩小太小，会有滚动条。
margin-bottom:10px;
}
.col{
flex:1.5 0;
border:1px solid red;
}
.col2{
flex:3 1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid red;
}
.col3{
flex:1 0;
text-align:right; //设置了flex,默认为左对齐，可通过text-align设置对齐方式。
border:1px solid red;
}
</style>
</head>
<body>
<div class="row">
<div class="col"> 本例在 Internet Explorer </div>
<div class="col2"> xingmingddddd </div>
<div class="col3"> 20200716 9:48:50 </div>
</div>
<div class="row">
<div class="col"> 本例在 Internet Explorer </div>
<div class="col2"> xingmingdddddaaaaaaaaaaaaaaaddddddddddddddddsssssssssssssssssssss </div>
<div class="col3"> 20200716 9:48:50 </div>
</div>
</body>
</html>
二、需要实现如下图，根据页面大小，第一列和最后一列宽度不变，中间列的宽度自动减小。
flex-grow
该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。
flex-shrink
该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。
flex-basis
该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。
在这里第一列和第三列的flex-shrink设为0，第二列lex-shrink设为1，即可实现根据页面大小，第一列和最后一列宽度不变，中间列的宽度自动减小；
flex-grow、flex-shrink、flex-basis三个属性的作用：
https://blog.csdn.net/m0_37058714/article/details/80765562
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
