html - 当遇到兄弟跨度时使文本换行

Question

基本上，我有两个 span 元素:一个向左拉，第二个向右拉。

左边的更大，右边的应该只是显示一个数字。

我想要实现的是 - 在调整窗口大小时，让左跨度线在遇到右跨度时断开，并在它发生时将右跨度垂直居中(因为容器 div 可能会获得一些额外的高度)。有什么想法吗？

这是代码:http://www.jsfiddle.net/1db4trxo/5/

.pricing {
  width: 100%;
  background: #333;
  color: #fff;
  overflow: hidden;
}
.left {
  float: left;
  margin-left: 5px;
}
.right {
  float: right;
  margin-right: 5px;
  color: #f6c42b;
}

<div class="pricing">
  <span class="left"> Wow, there's kinda lot of text here </span>
  <span class="right"> Just a price </span>
</div>

Answer 1

Flexbox 可以做到这一点，而且你不需要 float 。事实上，floats are ignored in a flex container .

Revised Fiddle

.pricing {
    display: flex;                    /* establish flex container */
    justify-content: space-between;   /* align children at opposite ends */
    background: #333;
    color: #fff;
}

.left {
    margin-left: 5px;
}

.right {
    white-space: nowrap;             /* prevent text from wrapping */
    align-self: center;              /* center element vertically */
    margin-right: 5px;
    color: #f6c42b;
}

<div class="pricing">
  <span class="left"> Wow, there's kinda lot of text here </span>
  <span class="right"> Just a price </span>
</div>