如何使用 flexDirection 列处理 flexbox 中的宽度？答案

【问题标题】：How can I handle width in flexbox with flexDirection column?如何使用 flexDirection 列处理 flexbox 中的宽度？
【发布时间】：2020-10-24 00:37:42
【问题描述】：

我认为我在将 css flexbox 应用于按钮时遇到了问题。

让我举个例子：

<div style={{display: "flex", flexDirection: "column"}}>
  <input />
  <input />
  <input />
  <button>click here</button>
</div>

如果我在高度上使用 flex 因为 flex 方向，我如何处理我的输入/按钮的宽度（没有宽度，仅使用 flex）。我必须错过一些东西，但我看不到什么！

感谢您的帮助！

【问题讨论】：

标签： reactjs flexbox

【解决方案1】：

您可以使用align-items css 属性将项目与其自身的宽度对齐。

<div style="display: flex; flex-direction: column; align-items: flex-start;">
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <button>click here</button>
</div>

【讨论】：

我去试试