如何避免Flex column布局中Flex items拉伸至全宽，保留原有尺寸？

Flex容器的align-items属性默认值为stretch，当flex-direction设为column时，布局的交叉轴为水平方向，因此所有子元素会被自动拉伸至与容器相同的宽度。

你可以根据实际需求选择以下任意一种方案实现：

• 方案1：统一修改容器的交叉轴对齐规则
  给Flex容器新增align-items配置，可选值根据对齐需求选择：flex-start（左对齐，保留子元素原始宽度）、center（水平居中）、flex-end（右对齐）。
  修改后的CSS代码如下：

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

• 方案2：单独控制指定子元素的对齐方式
  如果不需要修改所有子元素的拉伸规则，可给需要保留原始宽度的子元素单独设置align-self属性：

  /* 示例：仅给按钮取消拉伸效果 */
  .myForm button {
    align-self: flex-start;
  }
  

• 方案3：显式指定子元素宽度
  也可以直接给子元素设置固定宽度，直接覆盖默认的拉伸效果：

  .myForm input {
    width: 240px;
  }
  

内容的提问来源于stack exchange，提问作者Dave