时间戳

首页 > 解决方案 > 我的弹性项目不会采用宽度和高度属性并保持在一条线上

css - 我的弹性项目不会采用宽度和高度属性并保持在一条线上

问题描述

我有一段时间没有使用 flexbox，但我不确定为什么我的宽度和高度没有对每个 flex 项目生效，而且它们似乎都采用相等的宽度，但不是我输入的宽度。他们也都坐在一条线上，但我没有包括 A no wrap。

    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>
    );
  }

CSS：

    .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;
}

输出： 在此处输入图像描述

所需的输出：

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

标签： cssreactjssassflexbox

解决方案

由于您没有放置 flex-wrap，因此默认为 no-wrap，您需要放置flex-wrap:wrap，因为所有项目都试图放在同一行。如果您希望它们具有相同的高度和宽度，您还需要指定它，您正在为它们提供不同的宽度和高度。您可以尝试放置 30% 的宽度和固定的高度。

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

我做了一个简单的例子，也许它可以帮助： https ://codepen.io/JonathanDamiani/pen/abBOgBR

推荐阅读