时间戳

首页 > 解决方案 > 为什么占用这么多初始空间，如何控制呢？

html - 为什么占用这么多初始空间，如何控制呢？

问题描述

让我解释：

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;
}
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>

因此，这样做的目的是在不了解参数的情况下使容器灵活且可调整大小。我们为正方形设置了初始参数，一切都必须遵循这些值，然后在调整大小时容器的内容应该会拉伸。唯一的问题是输入。我们不能为它们设置指定的宽度，它们应该填充最大可用宽度，但不扩展它们的行。减小字体大小的示例效果很好。它不会扩展行，但是如果容器的宽度发生变化，它们会跟随它，但是......字体大小会太小。我想要的是与正常字体大小相同的行为。所以字体属性应该有一些东西，但是在玩了几个小时之后，我从你那里得到了一些帮助。有任何想法吗？

标签： htmlcss

解决方案

你可以加：

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

到那时你只需要控制容器来设置宽度。相关：为什么 <textarea> 和 <input> 元素不尊重最大宽度？

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>

推荐阅读