如何在Flexbox中将两个元素彼此相邻放置？

Question

我想在div flexbox中将两个元素彼此相邻放置。

我要做什么？

我有一个侧面抽屉flexbox，其中有列表项。每个列表项都有div flexbox，其中包含svg，span元素和时间戳记

我希望此svg和span元素和时间戳保持在同一行 如果跨度内容超过宽度，则应将其移至下一行，而不必将时间戳推到下一行。

所以每个列表项都应该与上图中的一样...

下面是代码，

01234

有人可以帮我解决这个问题吗？谢谢。

Answer 1

请注意，flex属性仅适用于直接flex子代：

• 您可以将async div也设置为flexbox（也许您可以像下面那样从flexbox中删除details）

• 在align-items: center中添加break-word: break-all，如果一行中没有足够的空格，则使文本中断

• （可选）您可以在span上放置flex: 0 0 auto，以保留svg的 auto 尺寸

请参见下面的简化演示

svg

.drawer {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 320px;
  top: 55px;
  right: 18px;
  min-height: 40%;
  max-height: 80%;
  overflow: scroll;
  overflow-x: hidden;
}

header {
  min-height: 38px;
  border-bottom: 1px solid #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0px;
  padding-top: 2px;
}

.list_item {
  display: flex;
  flex-direction: row;
  /*align-items: center;*/
  padding: 4px;
}

svg {
  margin-right: 6px;
  background: aliceblue;
  flex: 0 0 auto; /* take auto width, don't shrink or grow */
}

.details {
  display: flex; /* added */
  flex-grow: 1;
  /*align-items: center;*/
}

li {
  list-style: none;
}

.details span {
  word-break: break-all; /* added */
}

Answer 2

您也可以将flexbox用于商品。然后将其设置为justify-content：flex-start，并向左添加margin：auto作为时间戳。

.item{
  display: flex;
  align-items: flex-start;
  justify-content:flex-start;
  border: 1px solid #888888;
  margin: 0 0 10px 0;
  padding : 4px;
  width: 200px;
  
}
.item .time{
  margin-left: auto;
}
.item .icon{
  margin: 0 8px 0 0;
}
.item p {
  margin:0;
}

<div class="list">
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum ipsum ipsum</p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
</div>