css - 在 flex break 时更改文本对齐方式

Question

我正在编写一个应该是响应式的表单，也就是说，当浏览器窗口很小时，左侧标签会“跳”到顶部(参见下面的示例，通过删除 text-align 属性并调整浏览器大小)。

现在，当标签文本左对齐时效果很好。对于可用性问题，我希望标签右对齐(我不希望它们离输入框太远)但是一旦 flex 包裹起来，我就不希望它们再右对齐。

示例代码:https://jsfiddle.net/xhtfqbzL/

.cont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
span
{
  flex: 1 0 20vw;
  text-align: right;
  display: inline-block;
  padding-right: 0.5em;
}
input
{
  flex: 1 1 20rem;
  display: inline-block;
}

<div class='cont'>
<span>Label</span>
<input type="text" placeholder="content">
</div>

那么如何实现这个效果呢？

Answer 1

这里有一个hack要谨慎使用(或者根本不用...)

.cont {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.cont:before {
  content: "";
  flex: 1 0 20vw;
  height: 1.2em;
}

span {
  flex: 1 1 20rem;
  position: relative;
}

span:before,
span:after {
  content: attr(data-text);
  position: absolute;
  padding-right: 0.5em;
}

span:before {
  left: 0;
  bottom: 100%;
}

span:after {
  top: 0;
  right: 100%;
}

input {
  width: 100%;
}

<div class='cont'>
  <span data-text="Label">
  <input type="text" placeholder="content">
  </span>
</div>