仅使用 flexbox CSS 像网格一样对齐 flex 项目

Question

我正在尝试像这样在 flexbox 中左对齐项目。但是我无法让它们像在网格显示中一样对齐，我尝试了所有 flexbox 属性，但只能使用网格让它工作，但我不能在这里使用网格。

这是我的代码：

CSS

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align:left; 
}
 

我需要所有文本都由红线向左对齐。

Answer 1

需要固定每个项目的宽度以对齐位置。

尝试将flex-basiscss 属性添加到所有子样式。所以如果上面的样式是类似的.list-item，那么把这个样式添加到所有孩子喜欢......

.list-item > div {
  flex-basis: 25%;
}