html - 如何使用 flexbox 在特定布局中设置距离？

Question

我正在尝试完成以下任务：

如果容器比下图宽，则地图图钉图标应右对齐，而关闭 (x) 图标应保留在地址旁边。相应地，如果可以的话，文本应该在一行上。

我需要一个包含第一个和第二个弹性框项目的灰色背景。我得到了一些接近但不太正确的东西。这些项目之间有空间。

我错过了什么？

我有以下布局和 css：

.address-container {
  display: flex;
  height: 38px;
  align-items: stretch;
  border-radius: 25px;
  margin-bottom: 15px;
}

.address-pin-icon {
  order: 3;
  margin-left: 15px;
  border: 1px solid #F5F5F5;
  padding: 5px;  
}

.address-text {
  order: 1;
  margin-left: 5px;
  margin-right: 0px;  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  background-color: #F5F5F5;
  font-size: 15px;
}

.address-close {
  margin-left: 5px;
  margin-right: 15px;
  order: 2;
  background-color: #F5F5F5;
}

.address-close > img:hover {
  background-color: dimgrey;
  cursor: pointer;
}

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4" style="background-color: white">
      <div class="address-container">
        <span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
        <span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
        <span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
      </div>
    </div>
  </div>
</div>

标签： htmlcssflexbox

Answer 1

有点难以理解您的问题，但我在代码笔中重新创建了一些我认为可以满足您需要的东西：

https://codepen.io/dustinkeeton/pen/yQXMyo

简而言之，我将address-textandaddress-close元素包裹在它们自己的元素中，address-card div因为它们看起来像是在逻辑上组合在一起的。给出 adisplay: flex也有助于元素内的间距，因此文本可以拉伸到 1 行或换行。然后我justify-contents: space-between在父 div 上使用将地址容器推离引脚。

* {
  box-sizing: border-box;
}

.container {
  width: 25vw; /* just test value - lower this value to see collapsing happening */
  display: flex;
  justify-content: space-between; /* this is your spacing rule */
}

.address-card {
  display: flex; /* helps items be inline and take up space correctly */
}

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-size: 15px;
}

.pin {
  border: 1px solid #F5F5F5;
  padding: 3px;
  height: 30px;
  width: 30px;
}

<div class="container">
  <div class="address-card">
    <div class="text">1533 Sylvia Dr, Bristol, Maine</div>
    <img class="close" src="https://rgelb.github.io/public/misc/close.svg" height="18" />
  </div>
  <img class="pin" src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" />
</div>