Flex wrap and flex basis not working using CSS?-CodePudding

I am making this application, and I am using React. Here, I have many items, and I am dynamically adding them using React. Here's my code to help you understand better -

CSS:

.flexContainer {
  display: flex;
  flex-wrap: wrap;
}
.flexContainer .item {
  padding: 5px;
  border: 1px solid aqua;
  flex: 1 1 50%;
}
.flexContainer .item {
  display: block;
  width: 500px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

React:

            <div >
              <div key={p.id} >
                <div >
                  <p className="itemTitle">{p.title}</p>
                  <button onClick={() => addItem(p)}>
                    {alreadyAdded ? "Add again" : "Add to Cart"}
                  </button>
                </div>
              </div>
            </div>

Here is a snippet of my items:

  {
    id: 7,
    price: 50,
    button: (
      <button
        onClick={() => {
          alert("This function is not ready yet!!!!");
        }}
      >
        Click!
      </button>
    ),

    title: "Apple",
  },

So, when I run my program, I get this- My Pic

I had taken another similar code from here

As you can see, the code I had taken from the other stackoverflow is working, but mine is not working. I've used the same technique to do for mine as well but it's not working.

What I want is, 2 of the items to come in a row, with 50% of width, and so on.

Currently, it's not working.

Please help me out, it would help out a ton! Thanks.

CodePudding user response：

in terms of your question for that row removing some of the the code will allow this to work.

.flexContainer .item {
  display: block;
  width: 500px; 
}

This code is not really needed unless you have other reasons for it to be in your code but doesnt really play part of your question

As you will see from this link your row works

https://jsfiddle.net/ct96dL2o/1/

so from the original code you supplied this answer will work if you need a more elaborate answer you would need to show more code.

CodePudding user response：

If you are using bootstrap then use row and inside of that and two col-6 class and also checkout link of bootstrap grid

https://getbootstrap.com/docs/5.2/layout/grid/

<div >
  <div >
    <div >
      first
    </div>
    <div >
      second
    </div>
  </div>
</div>