元素之间的弹性空间答案

【问题标题】：flex space between elements元素之间的弹性空间
【发布时间】：2018-06-28 17:21:13
【问题描述】：

我有两个弹性元素，我需要它们之间的空间，我在它们之间添加了一个margin-right，它看起来很棒，但问题是当屏幕变得最小时，第二个元素向下移动到新行，我有aredudant 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;
      }

【问题讨论】：

标签： html css flexbox

【解决方案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' 中添加剩余元素的宽度即可。

【讨论】：

很高兴为您提供帮助:) 如果这似乎是您问题的正确解决方案，请接受它。
如果只有元素变得最小而不是窗口怎么办，调整元素大小......媒体查询在这里不起作用
如何调整图像大小？直接在代码中还是在网页中可拉伸？你给了它一个 186px 的最小宽度，所以我猜图像调整大小将通过代码...
@OrtalBlumenfeldLagziel 请告诉我这是否是您需要的。

【解决方案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>

【讨论】：