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

Question

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

如果容器比下面的图像宽，则地图图钉图标应右对齐，而关闭（x）图标应保留在地址旁边。相应地，如果合适，文本应该在一行上。

我需要有一个灰色背景，其中包含第一个和第二个flexbox项。我正在接近一些东西，但不太正确。这些项目之间有空间。

我想念什么？

我具有以下布局和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>

Answer 1

要理解您的问题有些困难，但是我在Codepen中重新创建了一些我认为可以满足您需求的东西：

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

它的不足之处是我将address-text和address-close元素包装在自己的address-card div中，因为看起来它们在逻辑上是组合在一起的。赋予display: flex也有助于元素内的间距，因此文本可以拉伸到1行或换行。然后，我在父div上使用justify-contents: space-between将地址容器推离插针。

* {
  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>

Answer 2

  

我需要有一个灰色背景，其中包含第一个和第二个flexbox项。我正在接近一些东西，但不太正确。这些项目之间有空间。

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

一旦删除了.address-close元素上的左边距，第一和第二个flexbox项之间的空间就会消失。

jsFiddle demo

Answer 3

该空间似乎来自您已应用于地址关闭等的空白处。我将其删除，并在地址文本中添加一些填充权。

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

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

.address-text {
  order: 1;
  margin-left: 5px;
  //margin-right: 0px; 
  padding-right: 15px;
  /* added this */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  background-color: lightgrey;
  font-size: 15px;
}

.address-close {
  /*  margin-left: 5px; */
  /* removed */
  /* margin-right: 15px; */
  /* removed */
  order: 2;
  background-color: lightgrey;
  padding-right: 15px;
  /* added this */
}

.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>