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

最新推荐文章于 2024-12-12 15:04:37 发布

楊一只

最新推荐文章于 2024-12-12 15:04:37 发布

阅读量1k

点赞数

分类专栏： css样式文章标签： css flex

本文链接：https://blog.csdn.net/weixin_44138723/article/details/115621935

版权

css样式专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现按钮根据角色显隐，并确保在按钮隐藏时整体布局向右移动。通过利用element-ui的Layout布局和Flexbox的display属性（flex与inline-flex的区别），实现了按钮紧随el-row后面的效果。同时，针对不同文字长度的input输入框，给出了相应的样式调整策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，当元素被隐藏的时候，整体也会向右靠啦！！