html - 强制 flexbox 列在 `flex-direction: column` 容器上相等

Question

如何在 flex-direction: column 容器上强制 Flexbox 列的宽度相等(所有列的最大值)？我不想使用 flex-basis、width 属性明确设置宽度。

JSFiddle:https://jsfiddle.net/suthanbala/1u9gtqkm/6/

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

.column{
  border: 1px red dashed;
}

<div class="row">
  <div class="column">
    Small Content
  </div>
  <div class="column">
    Medium Content Medium Content
  </div>
  <div class="column">
    Large Content Large Content Large Content
  </div>
</div>

Answer 1

如果您希望所有列都与最大列一样宽，您可以制作容器 inline-flex 并删除对齐项:

.row{
  display: inline-flex;
  flex-direction: column;
}

.column{
  border: 1px red dashed;
}

<div class="row">
  <div class="column">
    Small Content
  </div>
  <div class="column">
    Medium Content Medium Content
  </div>
  <div class="column">
    Large Content Large Content Large Content
  </div>
</div>