align-items：居中改变子元素的宽度

Question

不知何故，如果我将 items-center 放在父级，子元素会更改其宽度。

我使用顺风 CSS。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/> <div class="flex flex-col items-center"> <div class="mx-5"> <div class="flex max-w-xl mx-auto border-solid border border-slate-300/50 h-10 "> <input type="text" class="bg-inherit outline-none"> </div> </div> </div>

Answer 1

我不确定你所说的改变宽度是什么意思？ 但我猜你是想把孩子放在中心？ 只有当元素宽度小于父元素宽度时，Flex 框才会将元素居中。 请参阅下面的我的片段。 如果输入是 100% 宽度，它不会居中。 如果您说的是子宽度会发生变化，因为我很确定这是顺风对响应能力所做的。

 .flex-wrapper { display: flex; flex-direction: column; align-items: center; width: 400px; height: 500px; border: 2px solid red; }.flex-wrapper div:nth-child(1) { background-color: orange; width: 200px; }.flex-wrapper div:nth-child(2) { background-color: lightgray; width: 100%; }

 <div class="flex-wrapper"> <div> <span>One</span> </div> <div> <span>Two</span> </div> </div>

Answer 2

您可能想尝试设置默认width 。 我曾经对align-items: center;有过类似的问题。 我通过设置width: 100px; . IDK 如果它适用于您的情况，但它适用于我的情况。

PS：您可能想编辑您的问题以使其更清晰，它可以帮助其他人更好地理解您的问题，从而带来更好的解决方案。