显示 flex 没有影响 - ReactJS

Question

我想将项目显示为 flex，但它仍然显示为一列。我在这里做错了什么？这是我的组件：

import React from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import "./Listing.css";

const ProductComponent = () => {
  const products = useSelector((state) => state.allProducts.products);
  const renderList = products.map((product) => {
    const { id, title, image, price, category } = product;
    return (
      <div className="container">
        <div key={id} className="item-box" >
          <Link to={`/product/${id}`}>
            <div className="image-box">
              <img src={image} alt={title} />
            </div>
            <div className="detail">
              <div >{title}</div>
              <div >$ {price}</div>
              <div >{category}</div>
            </div>
          </Link>
        </div>
      </div>
    );
  });
  return <>{renderList}</>;
};

export default ProductComponent;

这是此组件的 css 文件：

.container{
    width: 100%;
    height: 90vh;
    flex-wrap: wrap;
    display: flex;
    
}

.item-box{
    border: 2px solid #000;
    display: flex;
    height: auto;
    width: 380px;
    padding: 10px;
    justify-content: center;
    margin: 20px; 
}

img{
    height: auto;
    width: 300px;
}

最后这是我的 App.css:

* {
  font-family: "Roboto", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

提前致谢。

我想将项目显示为 flex（从左到右），但它就像一个列，尽管我定义了“display:flex”

Answer 1

在 .container 的样式中只需添加 flex-direction:coloum

.container{
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

如果您希望列居中，那么您也可以附加 justify-content:center & align-items:center。

Answer 2

您正在遍历数组并输出多个容器。每个容器 display-flex 但问题是它们都只有一个 child。将 map 移动到容器内：

return (
  <div className="container">
    { products.map((product) => {
      const { id, title, image, price, category } = product;
      return (
        <div key={id} className="item-box" >
          <Link to={`/product/${id}`}>
            <div className="image-box">
              <img src={image} alt={title} />
            </div>
            <div className="detail">
              <div >{title}</div>
              <div >$ {price}</div>
              <div >{category}</div>
            </div>
          </Link>
        </div>
      )
    })}
  </div>
)

显示 flex 没有影响 - ReactJS

Display flex has no influence - ReactJS

css

reactjs

flexbox

display