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 CategoryCardQuiero alinear las tarjetas de a tres una al lado de la otra, traté de hacerlo usando display-flex, pero no pude, ¿me pueden ayudar? Los códigos css que escribí están arriba.
su código es confuso, de todos modos, si desea alinearlos uno al lado del otro, simplemente agregue display: flex al elemento principal. (Naturalmente, los elementos secundarios se alinearán horizontalmente cuando agregues display flex a su elemento principal, y si deseas que se alineen verticalmente, simplemente agrega flex-direction: column;)
.flex-div{ display: flex; }