Question

我有两个flex元素，它们之间需要空间，我在它们之间添加了一个margin-right，看起来不错，但是问题是，当屏幕变小时，第二个元素下降到了新行，并且我的dudant-margin-right：30px太长了，看起来也不好。我该如何解决：

我不想使用窗口调整大小事件，因为如果您在移动设备中打开此ui，那么一开始您会将这两项放在单独的行中。

.item-target-scale {
        flex: 3;
        min-width: 186px;
        display: inline-block;
        text-align: left;
        margin-right: 30px;
      }

      .item-target-bar {
        flex:1;
        min-width: 100px;
        display: inline-block;
      }

Answer 1

为此使用媒体查询。检查您的页面并找出何时发生换行（使用devtools可以提供精确的视口宽度（以像素为单位））。

    @media screen and (min-width:'calculated'px)
    {
        .item-target-scale {
        margin-right: 0px;
    }
}

希望这是您所需要的。

编辑：

如果元素大小不固定，请使用此选项：

function myFunction(){
var i=document.getElementById("target1").offsetWidth+document.getElementById("target2").offsetWidth+50;
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(i>=w)
{
	document.getElementById("target1").style.marginRight="0px";
}
else
{
	document.getElementById("target1").style.marginRight="30px";
}
}

.item-target-scale {
        flex: 3;
        min-width: 186px;
        display: inline-block;
        text-align: left;
        margin-right: 30px;
        background:green;
      }

      .item-target-bar {
        flex:1;
        min-width: 100px;
        display: inline-block;
        background:red;
      }

<body onresize="myFunction()" onload="myFunction()">

<div class="item-target-scale" id="target1">
dwdwdwdwd
</div>
<div class="item-target-bar" id="target2">
eegerg
</div>

</body>

我将需要HTML代码来获取项目其余部分的大小，但这可以通过检查来完成。因此，只需在“ i”中添加其余元素的宽度即可。

Answer 2

我建议将这两个元素包装在父元素中并使用justify-content: space-between属性。

.parent {
  display: flex;
  justify-content: space-between;
  width: 50%;
}

.child {
  height: 20px;
  width: 50px;
  background: red;
}

<div class="parent">
  <div class="child child1">
  </div>
  <div class="child child2">
  </div>
</div>

元素之间的弹性空间

2 个答案: