我有一排項目

我想把它做成選中的項目在div的中間，其他的項目在兩邊，這樣它們的順序是一樣的。

以下是我的代碼:

<div className="flex mx-auto justify-center items-center">
  <Circle selected={selected === ActionOptions.NONE} onClick={e => setSelected(ActionOptions.NONE)} title="None" />
  <Circle selected={selected === ActionOptions.ICON} onClick={e => setSelected(ActionOptions.ICON)} title="Icon">
    {Icon(Icons.CHECK, selected === ActionOptions.ICON ? 'w-20 h-20' : 'w-8 h-8')}
  </Circle>
  <Circle selected={selected === ActionOptions.EMOJI} onClick={e => setSelected(ActionOptions.EMOJI)} title="Emoji">
    {Icon(Icons.SMILE, selected === ActionOptions.EMOJI ? 'w-20 h-20' : 'w-8 h-8')}
  </Circle>
  <Circle selected={selected === ActionOptions.TIMER} onClick={e => setSelected(ActionOptions.TIMER)} title="Timer">
    <ClockIcon className={selected === ActionOptions.TIMER ? 'w-20 h-20' : 'w-8 h-8'} />
  </Circle>
</div>

function Circle({
  selected,
  children,
  onClick,
  title,
}: PropsWithChildren<{ selected: boolean; onClick: (e) => void; title: string }>) {
  return (
    <div className="flex flex-col items-center justify-center cursor-pointer">
      <div
        onClick={onClick}
        className={`rounded-full flex justify-center items-center ${
          selected ? 'w-32 h-32 border-4' : 'w-14 h-14 border-2'
        } mx-2  border-white bg-white/10`}
      >
        {children}
      </div>
      <span className="text-xs">{title}</span>
    </div>
  );
}

有什么線索嗎？

我想我沒有正確理解您想要什么，但是您可以嘗試像這樣更改flex-order:

const Circles = [
  { title: 'None', option: ActionOptions.NONE, order: 1 },
  { title: 'Icon', option: ActionOptions.ICON, order: 1 },
  { title: 'Emoji', option: ActionOptions.EMOJI, order: 3 },
  { title: 'Timer', option: ActionOptions.TIMER, order: 3 },
]

export default function App() {
  const [selected, setSelected] = useState<ActionOptions>();

  return (
    <div className="flex mx-auto justify-center items-center transition-all duration-1000">
      {Circles.map(({ title, option, order }) => {
        return (
          <Circle
            key={title}
            selected={selected === option}
            onClick={() => setSelected(option)}
            title={title}
            order={order}
          >
            <div>{option}</div>
          </Circle>
        );
      })}
    </div>
  );
}

export function Circle({ selected, children, onClick, title, order }) {
  return (
    <div
      className={`item flex flex-col items-center justify-center cursor-pointer ${
        selected ? `order-2` : `order-${order}`
      }`}
    >
      <div
        onClick={onClick}
        className={`rounded-full flex justify-center items-center ${
          selected ? 'w-32 h-32 border-4' : 'w-14 h-14 border-2'
        } mx-2  border-white bg-white/10`}
      >
        {children}
      </div>
      <span className="text-xs">{title}</span>
    </div>
  );
}