Css 我的flex项目不会采用宽度和高度属性，而是停留在一行上

我已经有一段时间没有使用flexbox了，但我不确定为什么我的宽度和高度对每个flex项目都不起作用，它们似乎都采用相同的宽度，但不是我输入的宽度。他们也都坐在一行，但我没有包括一个没有包装

    const Filter = () => {
    return (      
      <div className="store-results-inner-container">
        {alphabetIntoArray.map((c, i) => {
          return (
            <div key={i} className="alphabet-individual-container">
              {filteredValues
                .filter(store => store.title.rendered.startsWith(c)).length === 0 
                ? <h1 ref={ el => itemsRef.current[i] = el } className={'Grey'}>{c}</h1>
                : <h1 ref={ el => itemsRef.current[i] = el } className={'notGrey'}>{c}</h1>   
              }         
              {filteredValues
                .filter(store => store.title.rendered.startsWith(c))
                .map((item, index) => (   
                  <li key={index}>{item.title.rendered}</li>
                ))}
              </div>
          );
        })}
      </div>
    );
  }

输出：

期望输出：

---

我希望它们具有相同的高度和宽度，并且每列有3个响应性。

由于您没有放置柔性包装，默认为无包装，您需要放置

flex-wrap:wrap

，因为所有项目都试图放在同一行。 如果你想让它们有相同的高度和宽度，你也需要指定它，你给它们不同的宽度和高度。您可以尝试将宽度设置为30%和固定高度

我认为更好的解决方案是使用网格

我举了一个简单的例子，也许它能帮上忙：

---

您可以将其转换为css网格，并将模板与mixmax一起使用。或者，按照您要走的路线，将字符父容器设置为行换行，并将字符最大宽度设置为33%，宽度设置为100%。这是一项漫长的工作，但这是我的建议。

    .store-results-inner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:5%;
    padding-bottom:5%;
    height: auto;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    background-color: seagreen;
}

.alphabet-individual-container {
    width: 1150px;
    height: 200px;
    flex: 1 1 0px;
}