How can I show the card I bought Antd side by side?

user_9835009 0
Viewed 83

enter image description here

import { categories } from './data/categories' 
import { useState } from 'react' 
import {Card} from 'antd' import './App.css';        
import image1 from './assets/images/Resim.png';

const { Meta } = Card;

const CategoryCard = () => {
     const [categoriesList, setCategoriesList] = useState(categories)
  

  return (

    <>
       {categoriesList.map((categori ,key)=>(
       <div className='flex-container '>
        <div className='flex-div'>
        <Card
          style={{ width: 240 }}
          cover={<img alt="example" src={image1} />}
        >
          <Meta title={categori.name} description= {categori.description}/>
        </Card>
      </div>
    </div>
    
    ))}
    </>
    
    
); }

export default CategoryCard

I want to align the cards in threes side by side, I tried to do it using display-flex, but I couldn't, can you help? The css codes I wrote are above.

flexbox reactjs css html javascript
1 Answers

your code is confusing, anyway if you wanna align them side by side you just add display: flex to the parent element. (naturally, children will be horizontally aligned when you add display flex to their parent, and if you want them to be aligned vertically just add flex-direction: column;)

.flex-div{
  display: flex;
  }
user_173256950
Related