现在，我最好的尝试是

Question

我正在编写一个应该响应的表单，也就是说，当浏览器窗口很小时，左侧标签“跳”在顶部（请参见下面的示例，其中删除了text-align属性并调整了浏览器的大小）

现在，当标签文本左对齐时，它可以很好地工作。对于可用性问题，我希望标签正确对齐（我不希望它们离输入框太远），但是一旦flex包好，我就不再希望它们正确对齐了。 / p>

.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>

Answer 2

现在，我最好的尝试是

   html, body { padding: 0; margin: 0 }
   .cont
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.cont span, .cont input
{
    display: inline-block;
}

.cont span
{
    box-sizing: border-box;
    text-align: right;
    background: blue;
    flex: 1 0 20rem;
}
@media screen and (max-width: 40rem) { 
    .cont span { text-align: left; }
}

.cont input
{
    background: green;
    flex: 1 1 50vw;
    box-sizing: border-box;
}

<div class='cont'>
    <span>Some Label</span>
    <input type="text" value="Text here">
</div>

我不想进行媒体查询，因为总是很难找到断点（并且可以根据设计更改或设备发展而发展）。在这里，我仍然使用了媒体查询，但是40rem魔术值是计算出来的，不是手工选择的。通常，表单的行项目中的一个具有固定的大小，另一个相对于视口大小。在此示例中，固定大小为20rem。

由于它们是弹性商品，因此当它们不再适合该行时，即它们的宽度将达到其flex-basis属性时，它们将自动换行。

因此，行的宽度为span_width[20rem] + input_width[50% * w] = 100% * w 我推断它们将在100% w = 50% w + 20rem => 50%w = 20rem => w = 40rem

时自动换行

因此，当视口的宽度小于40rem时，它们将自动换行。

与此有关的主要问题是，您必须知道此类物品周围的确切边距和填充尺寸，这是要维护的真正痛苦。

另一种不使用媒体查询的解决方案：

   html, body { padding: 0; margin: 0 }
#test
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}
#test p
{
    flex: 0 1 20rem;
    padding:0;
    margin:0;
}
#test p s
{
    width: calc((48vw - 100%) * 5000);
    min-width: 1%;
    max-width: 16rem;
    
    display: inline-block;
    background: salmon;
    height: 1rem;
}
#test p span
{
    background: red;
    padding-right: 0.5rem;
}
#test b
{
    flex: 1 0 50vw;
    background: yellow;
}

<div id="test">
    <p>
        <s></s>
        <span>First</span>
    </p>
    <b>Second</b>
</div>

这是这样的：

标签分为2个内联元素，一个分隔符和标签本身。
间隔器使用了Fab Four技巧，也就是说，width属性被计算为在+infinite和-infinite之间振荡，从而受到min-width的约束和max-width。
断点由flex行中的第二项设置（在示例中，window_width:100vw - input_width:50vw）：当标签的剩余大小小于行的最小宽度时，其max-width属性会被使用，并在标签元素的右侧添加一个“空格”。当flex行换行时，现在剩下的大小非常大且在断点之上，因此选择了min-width（在我的示例中，我使用了1%，但可以是{{1} }，即标签左侧几乎没有“边距”。

该技术的警告是，您必须添加一个元素（可以在此处使用0%伪元素来完成），并且必须将::before设置为小于max-width。那一点使得该解决方案难以维护。

折断时更改文本对齐方式

2 个答案:

现在，我最好的尝试是

另一种不使用媒体查询的解决方案：