Flex包装和Flex基础不使用CSS工作？

Question

我正在制作此应用程序，并且正在使用React。在这里，我有很多项目，我正在使用React动态添加它们。这是我的代码可以帮助您更好地理解

-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 class="flexContainer">
              <div key={p.id} class="item">
                <div class="item">
                  <p className="itemTitle">{p.title}</p>
                  <button onClick={() => addItem(p)}>
                    {alreadyAdded ? "Add again" : "Add to Cart"}
                  </button>
                </div>
              </div>
            </div>

这是我项目的片段：

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

    title: "Apple",
  },

因此，当我运行程序时，我会得到这个 - 我的pic

我从在这里

如您所见，我从其他stackoverflow中获取的代码是工作，但我的工作不起作用。我也使用了相同的技术来为我做的，但它行不通。

我想要的是，有2个连续的项目，宽度为50％，依此类推。

目前，它不起作用。

请帮助我，这将有所帮助！ 谢谢。

Answer 1

就您的问题而言，删除某些代码将允许它起作用。

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

否

除非您有其他理由将其列入您的代码

， /1/“ rel =” nofollow noreferrer”> https://jsfiddle.net/ct96dl2o/1/

因此，从您提供的原始代码中，您提供的答案将有效，如果您需要更精致的答案，则需要显示您需要显示的答案更多代码。

Answer 2

更改您的物品样式宽度

.flexContainer .item {
  width:50% !important
}

Answer 3

如果您使用的是Bootstrap，则使用行和两个Col-6类，还可以结帐bootstrap网格的链接

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

<div class="container">
  <div class="row">
    <div class="col-6">
      first
    </div>
    <div class="col-6">
      second
    </div>
  </div>
</div>