CODEWITHSUNDEEP
cssreactjssassflexbox
ashley g
ashley g

Reputation: 885

My flex items wont take a width and height property and stay on one line

I haven't used flexbox for a while but I'm not exactly sure why my width and height aren't taking effect for each of the flex items and they all seem to be taking an equal width but not the width I have input. They also all sit on one line but I haven't included 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;
}

output: enter image description here

desired output:

I want them to have an equal height and width and have 3 per column which are responsive.

Upvotes: 0

Views: 30

Answers (1)

Jonathan Damiani
Jonathan Damiani

Reputation: 26

As you haven't put a flex-wrap, the default is no-wrap, you need to put flex-wrap:wrap, because all items are trying to fit at the same line. And if you want them to have equal height and width you need to specify it as well, you are giving different width and height to them. You can try to put width of 30% and a fixed height.

I think a better solution is to use a grid.

I did a quick example, maybe it can help: https://codepen.io/JonathanDamiani/pen/abBOgBR

Upvotes: 1

Related Questions