html - 嵌入式 span 元素中的 FlexBox 对齐问题

Question

我想与右侧的日期时间 span 元素对齐。我可以通过使用 float 属性来做到这一点，但是当我使用 flexbox 时我不能这样做。

截图:

---

代码示例:

.flex-container {
  display: flex;
  flex-direction: row;
  width: 300px;
  margin: auto;
  padding: 10px;
  color: #fff;
  background: #777;
}

.flex-container .secondText {
  flex-grow: 1;
}

<div class="flex-container">
  <span class="firstText">some text here..<span class="secondText">13:30</span></span>
</div>

Answer 1

让两个<span>标签为 flex-items (使它们成为 <div class="flex-container"></div> 的直接子代)。然后添加 margin-left: auto;到你想要对齐到右边的元素:

.flex-container {
  font-family: Arial, sans-serif;
  font-size: 12px;
  display: flex;
  justify-content:space-between; 
  width: 300px;
  margin: auto;
  padding: 10px;
  flex-wrap: wrap;
  color: #fff;
  background: #1E79AA;
}

.flex-container .firstText {
  line-height: 1.5;
  text-align: justify; /* optional; text-align: right works too */
}

/* To avoid overlaping of time and plain text!!! */
.flex-container .firstText:after {
  content: "";
  display: inline-block;
  width: 40px;
  line-height: 1.5em;
}

.flex-container .secondText {
  margin-left: auto;
  margin-top: -1.5em;
  height: 1.5em;
  line-height: 1.5em;
  width: 40px;
  background: #FF9500;
  text-align: center;
}

<div class="flex-container">
  <span class="firstText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa orci, euismod elementum porttitor tempor, laoreet ut mauris. Aliquam feuaiat quam ac sem feuaiat hendrerit hendrerit feuaiat evoid overlap. </span>
  <span class="secondText">23:30</span>
</div>