css - 如何将响应框与左对齐框居中在同一行？

Question

我目前有一个带有徽标和搜索栏的 NavBar，如下所示：

我想将搜索栏放在更大的屏幕上，并让搜索栏占用导航栏上的空白空间，而不会溢出到左侧的徽标上。这是导航栏的代码：

  const NavBar = () => {
  return (
    <Flex>
      <Center p="3">
        <Link href="/">
          <a>MarketBuddy</a>
        </Link>
      </Center>
      <Box p="4" flex="1" maxW="500">
        <SearchBar />
      </Box>
    </Flex>
  );
};

任何有关如何执行此操作的指示将不胜感激。