Question

让我解释一下：

   if (typeof payload !== "undefined") {

body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.row {
  display: flex;
  align-items: stretch;
}
.line {
  width: 20px;
  background-color: blue;
}
.square {
  min-height: 200px;
  min-width: 200px;
  flex: 1;
  background-color: red;
}
input {
  flex: 1;
}
.inputs {
  background-color: yellow
}
.inputs.none {
  display: none;
}

.reduce-font-size input {
  font-size: 4px;
}

因此，这样做的目的是使容器灵活且可调整大小，而无需了解任何有关参数的信息。我们为正方形设置了初始参数，所有参数都必须遵循这些值，然后在调整大小时，容器的内容应该伸展。唯一的问题是输入。我们无法为它们设置指定的宽度，它们应该填充最大可用宽度，但是不能扩展它们的行。减小字体大小的示例效果很好。它不会扩展行，但是如果容器的宽度改变了，容器就会跟随它，但是...那么字体大小会太小。我想要的是与普通字体大小相同的行为。所以应该有一些font-properties属性，但是经过几个小时的解决，我从您那里得到了一些帮助。有什么想法吗？

Answer 1

您可以添加：

input {
  width:100%;
}
.inputs {
  max-width: 100%;
}

到那时，您只需要控制容器来设置宽度。相关：Why don't <textarea> and <input> elements respect max-width?

body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.row {
  display: flex;
  align-items: stretch;
}
.line {
  width: 20px;
  background-color: blue;
}
.square {
  min-height: 200px;
  min-width: 200px;
  flex: 1;
  background-color: red;
}
input {
  flex: 1;
  width:100%;
}
.inputs {
  max-width: 100%;
}
.inputs.none {
  display: none;
}

.reduce-font-size input {
  font-size: 4px;
}

Inputs display none
<div class="container">
  <div class="row">
    <div class="line"></div>
    <div class="square"></div>
    <div class="line"></div>
  </div>
  <div class="row inputs none">
    <input/>
    <input/>
    <input/>
    <input/>
  </div>
</div>

Inputs visible
<div class="container">
  <div class="row">
    <div class="line"></div>
    <div class="square"></div>
    <div class="line"></div>
  </div>
  <div class="row inputs">
    <input/>
    <input/>
    <input/>
    <input/>
  </div>
</div>

Inputs reduced font-size

<div class="container">
  <div class="row">
    <div class="line"></div>
    <div class="square"></div>
    <div class="line"></div>
  </div>
  <div class="row inputs reduce-font-size">
    <input/>
    <input/>
    <input/>
    <input/>
  </div>
</div>

为什么<input />需要那么多初始空间，以及如何控制它？

1 个答案: