:span、diaplay:inline-flex的动态布局

CSS实现下面样式
ps:导入、导出按钮会根据角色显隐(!!!)
要求：当按钮隐藏时，整体偏右移动

思路1:使用element-ui的Layout 布局
给每个 el-col动态绑定span
例<el-col :span="5"> 这个“5”可以改变

2.给这个el-col一个样式，width为auto它好像就会被根据整个大的div去缩放这个el-col大小。

.el-col-5{
  display: flex;
  width: auto;
}

3.由于input框前面的文字长短不一样，如果不设置，一旦文字太长就会input压住，所以要给el-col中class名为txt的div加上相应的宽度，以及padding。（具体情况具体分析）

.el-col-5 .txt{
  width: 50px;
  padding-top: 12px;
  padding-left: 10px;
}

难点：三个按钮要紧随在el-row后面
要学习到一个知识点display：flex和display: inline-flex区别
转载：display：flex和display: inline-flex区别

flex

.main{
      background-color: #0f0;
      display: flex;/*父div设置该属性*/
    }               
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }

此时没有为父元素main设置宽度，默认为100%；
即使用display：flex,父元素会独占一行，那么它的宽度就很大很大，没有办法紧随在el-row后面

**

inline-flex

**

.main{
      background-color: #0f0;
      display: inline-flex;/*父div设置该属性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }
    .main div:nth-child(2){
            height:60px;
    }
//DOM
<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

此处虽然没有有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。
即使用display：inline-flex,父元素自适应，那么它的宽度是根据所有子元素宽度而设定，就有办法紧随在el-row后面

！！！回到原来主题
设置按钮父元素的样式：

.txt_bent1But{
  display: inline-flex;
  width: 100%;
  float: right;
  margin: 0 10px 0 10px;
}

三个按钮就会紧随在el-row后面了，且因为设置了float:right，当元素被隐藏的时候，整体也会向右靠啦！！