I want to show items as flex but still it is showing like a column. What am I doing wrong here? This is my component :

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;

This is the css file of this component:

.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;
}

And finally this is my App.css:

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

Thanks in advance.

I wanna show the items as flex (from left to right) but it is like a column though I defined "display:flex"

CodePudding user response：

You are looping through the array and outputing multiple containers. Each container is display-flex but the problem is that they all have only one child. Move the map inside the container:

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>
)

CodePudding user response：

In the style of .container just add flex-direction:coloum

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

If you want the column in center, then you can append justify-content:center & align-items:center as well.