使用弹性布局完成div在同一行显示，应用在导航中。
# js实现深拷贝
# let dataTextAll = new Array();
# let dataTextDate = JSON.parse(JSON.stringify(dataTextAll));
1 在同一行中有两个div
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
.data{
width: 100px;
display: flex;
}
.data_left{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.data_right{
white-space: nowrap;
/* 自动向右对齐 */
margin-left: auto;
}
</style>
</head>
<body>
<!--两个div使用弹性布局 -->
<div class="data">
<div class="data_left">
左侧尽量显示，内容超出宽度显示省略号
</div>
<div class="data_right">
右侧靠右
</div>
</div>
</body>
</html>
2 在同一行中有多个div弹性布局
使用弹性布局和盒布局
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
.data{
/*注意：此处使用width无效*/
display: flex;
}
.data>div{
box-sizing: border-box;
/* 如果 div高度不一样，让div顶部对齐使用vertical-align*/
/*vertical-align: top;*/
}
.data_left{
width:300px;
background-color: #E6A23C;
}
.data_middle{
flex: 1;
background-color: #909399;
}
.data_right{
background-color: #67C23A;
width:300px;
}
</style>
</head>
<body>
<!-- 多个div使用弹性布局与盒布局 -->
<div class="data">
<div class="data_left">
左侧
</div>
<div class="data_middle">
中间
</div>
<div class="data_right">
右侧
</div>
</div>
</body>
</html>
