Проблема выравнивания FlexBox во встроенных элементах span

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

Вы можете назначить flex также для внешнего диапазона и использовать justify-content: space-between; на нем и margin-left: auto на внутреннем диапазоне, чтобы переместить его вправо. Теперь по умолчанию внутренний интервал будет находиться на строке ниже последней текстовой строки, но если к нему применить margin-top: -1em;, он перемещается вверх:

.flex-container {
  display: flex;
  width: 300px;
  margin: auto;
  padding: 10px;
  color: #fff;
  background: #777;
  
}
.firstText {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  }

.secondText {
  margin-left: auto;
  margin-top: -1em;
}

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

Answer 2

Пусть оба тега <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>

Answer 3

Предполагая, что у вас будет несколько строк, если вы хотите обернуть текст вокруг даты, вам придется использовать float: right, но если вы не возражаете, поместив дату поверх остальной части текста, вы можете используйте position: absolute и поместите его в нижний правый угол.

.flex-container {
  display: flex;
  flex-direction: row;
  width: 300px;
  margin: auto;
  padding: 10px;
  color: #fff;
  background-color: #177CAB;
  position: relative;
  font-size: 22px;
  line-height: 1.5;
}

.flex-container .secondText {
  background-color: #E1B639;
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0px 10px 0px 10px;
}

<div class="flex-container">
  <span class="firstText">
    some texrgrgt here.. soehme text here.. 
    someehtext here.. so wtwtg wtg rme text here..
    some text here.. some text here..
    <span class="secondText">13:30</span>
  </span>

</div>