flex-direction:column布局下width:auto不生效，如何实现子元素宽度自适应左对齐

问题原因 #

当父容器设置flex-direction: column时，flex布局的交叉轴切换为水平方向，flex容器的align-items属性默认值为stretch，会强制拉伸所有子元素的宽度占满父容器宽度，因此你设置的width: auto看起来没有生效。

解决方案 #

你可以通过修改交叉轴的对齐规则实现需求，不需要用到width: max-content/width: min-content属性，有两种可选方案：

方案1：修改父容器对齐规则（适合所有子元素都需要自适应宽度左对齐的场景）

给父容器新增align-items: flex-start属性，关闭交叉轴拉伸的默认行为，所有子元素都会自动按内容宽度自适应，且保持左对齐：

.parent {
  background: lightblue;
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* 新增以下属性 */
  align-items: flex-start;
}
.child {
  display: flex;
  border: 2px solid green;
  border-radius: 4px;
  padding: 10px;
}

HTML代码无需修改。

方案2：单独修改目标子元素的对齐规则（适合父容器下还有其他子元素需要保持拉伸效果的场景）

不需要修改父容器属性，仅给需要自适应宽度的子元素新增align-self: flex-start属性即可：

.parent {
  background: lightblue;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.child {
  display: flex;
  border: 2px solid green;
  border-radius: 4px;
  padding: 10px;
  /* 新增以下属性 */
  align-self: flex-start;
}

HTML代码无需修改。

两种方案最终实现的效果和flex-direction: row时的效果完全一致。

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