javascript - 为什么将 display flex 添加到父级不允许我设置 flex

Question

我正在编写 react 组件，现在尝试使用 index.css 设置样式（我知道这不是正确的方法）。所以这里是结构

此外，我想在总共 24 个中显示一定数量的 productContainer 组件（让我们说 3 个）。现在所有内容都显示在同一行中。我尝试了 flex-wrap 但它不能正常工作。Width 也将所有内容都推送到同一行。

我知道我们可以通过使用内联块或网格来修复它，但我想要一种 flexbox 方式来做同样的事情。

CSS：

.productlist {
	display: flex;
}
.productContainer {
	padding: 10px;
	width: 340px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-items: flex-start;
	border-style: ridge;
	border-color: black;
	border-width: 1px;
}
.item {
	width: 100px;
	word-wrap: break-word;
}

标签： javascriptcssreactjsflexbox

Answer 1

你需要两者wrap并basis达到你想要的结果。flex-basis相当于widthin flex，并且flex-wrap会让元素不溢出。不指定flex-grow将保持最后一个不完全适合行的元素的大小相同（如果你有奇怪的元素，就像在这个例子中一样）。

.productlist {
  display: flex;
  flex-wrap: wrap; /* wrap items in container */
}

.productContainer {
  padding: 10px;
  box-sizing: border-box;
  flex-basis: 33%;  /* 3 containers per row */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px ridge black;
}

<div class="productlist">
    <div class="productContainer">
        <div class="item title">Title-1</div>
        <div class="item price">Price</div>
        <div class="item company">Company 1</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-2</div>
        <div class="item price">Price</div>
        <div class="item company">Company 2</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-3</div>
        <div class="item price">Price</div>
        <div class="item company">Company 3</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-4</div>
        <div class="item price">Price</div>
        <div class="item company">Company 4</div>
    </div> 
</div>