Flex项目正在拉伸[复制]

Question

如何避免flex列中的项目拉伸到全宽？我希望它是创建时的原始大小。

.myForm {
  display: flex;
  flex-direction: column;
}

<form class="myForm">
  <input type="text" />
  <input type="text" />
  <button>Test</button>
</form>

Answer 1

您提到了显示：flex；所以您的元素大小也可以根据列大小进行弯曲。您可以为您的第一级孩子单独提供css属性，如

.myForm > * {
    width: fit-content;
}

.myForm {
  display: flex;
  flex-direction: column;
}
/* below will be select any first level children under .myForm */
.myForm > * {
    width: fit-content;
}

<form class="myForm">
  <input type="text" />
  <input type="text" />
  <button>Test</button>
</form>

Answer 2

使用<代码>最大宽度：最大内容 ，或宽度：最大内容 在子元素上。

.myForm {
  display: flex;
  flex-direction: column;
}
/* below will be select any first level children under .myForm */
.myForm > * {
    max-width: max-content;
}

<form class="myForm">
  <input type="text" />
  <input type="text" />
  <button>Test</button>
</form>

Answer 3

在CSS中，flex属性align items的默认值是stretch，您可以猜到，它将flex父对象的子对象拉伸到全宽。你可以换个别的东西来解决这个问题。例如

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

<form class="myForm">
  <input type="text" />
  <input type="text" />
  <button>Test</button>
</form>