Css 最多 2 行的 Flex 水平滚动

发布于12月11日

我正在使用Mantine.dev和Nextjs，我有这个部件设计.

我有一个字符串列表，长度未知，可能有任何数量，在宽阔的视区中，它们可以包裹尽可能多的字符串，没有最大高度限制but in a small viewport, there should be only 2 rows in a way that it makes horizontal scrolling

This is what it currently looks like in small viewport

The code个

<ScrollArea>
 <Flex wrap='wrap' rowGap={10} columnGap={8} h={{ base: 65, sm: 'auto' }}>
  {services.map((service, i) => (<Button>{service}</Button>))}
 </Flex>
</ScrollArea>

推荐答案

您可以使用MediaQuery组件和Box组件而不是Flex来实现这一点，因为我们需要将布局从display: flex;更改为column-count: 2;，并更改writing-mode: vertical-lr;才能获得结果.

import { ScrollArea, Button, Box, MediaQuery } from "@mantine/core";

const services = [
  "Frontend",
  "Backend",
  "FullStack",
  "DevOps",
  ...
];

export default function App() {
  const boxStyles = {
    display: "flex",
    justifyContent: "flex-start",
    flexWrap: "wrap",
    columnGap: 8,
    rowGap: 10
  };

  const boxStylesSM = {
    display: "block",
    columnCount: 2,
    columnGap: 10,
    writingMode: "vertical-lr"
  };

  const buttonStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    whiteSpace: "nowrap"
  };

  const buttonStyleSM = {
    marginRight: 8
  };

  return (
    <div className="App">
      <ScrollArea type="auto" sx={{ padding: "0.8rem 0.5rem" }}>
        <MediaQuery smallerThan="sm" styles={boxStylesSM}>
          <Box sx={boxStyles}>
            {services.map((service, i) => (
              <MediaQuery smallerThan="sm" styles={buttonStyleSM}>
                <Button sx={buttonStyle} key={i}>
                  {service}
                </Button>
              </MediaQuery>
            ))}
          </Box>
        </MediaQuery>
      </ScrollArea>
    </div>
  );
}