Горизонтальное позиционирование внутри React.Fragment

Рейтинг: 0Ответов: 1Опубликовано: 20.01.2023

У меня есть вот такая компонента:

import React from 'react';
import Item from "../Item/Item";
import styles from './ItemList.module.css';

const ItemList = ({cards}) => {

    return (
        <>
            { cards.map(item =>
                    <div key={item.id} className={styles.container}>
                        <div className={styles.block}>
                            <Item data={item}/>
                        </div>
                    </div>
                )}
        </>
    );
};

export default ItemList;

И css модуль:

.block {
    width: 320px;
    height: 510px;
}

.container {
    display: flex;
    flex-flow: column;
    align-items: center;
    flex-basis: 320px;
    min-height: 510px;
}

Проблема в том что элементы отображаются вертикально, тогда как задача сделать это горизонтально. Как это можно сделать?

css reactjs позиционирование
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

вынеси контейнер до map

import React  from 'react';
import Item   from '../Item/Item';
import styles from './ItemList.module.css';

const ItemList = ({cards}) => {

  return (
    <div className={styles.container}>
      {cards.map(item =>
        <div key={item.id} className={styles.block}>
          <Item data={item} />
        </div>,
      )}
    </div>
  );
};

export default ItemList;

код