Question

我想连续3列，但是每行都没有，当每行的项目等于1时，我不希望项目的宽度为100％。

const Flex = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
`;
const Item = styled.div`
  flex-grow: 1;
  flex: 1 1 27%;
  height: 30px;
  border: 1px solid black;
`;
function App() {
  const [num, setNum] = useState(0);
  return (
    <div className="App">
      <h1>{num}</h1>
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        add
      </button>
      <button onClick={() => setNum(0)}>reset</button>
      <Flex>
        {[...Array(num)].map(o => (
          <Item>{o}</Item>
        ))}
      </Flex>
    </div>
  );
}

https://codesandbox.io/s/distracted-hellman-jzv9i

例如，不应将100％应用于数字1,4,7,10,13，依此类推。我可以知道索引何时等于1,4,7,10,13，但是我怎么知道它在新行上？

Answer 1

尝试一下-

passport.php

如果将固定宽度设置为项目宽度，则不会占用新行的100％空间。

Answer 2

您可以将商品的宽度设为33.33333%，将容器的宽度设为100%：

const Flex = styled.div`
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
`;
const Item = styled.div`
    height: 30px;
    width: 33.33333333%;
    border: 1px solid black;
    box-sizing: border-box; // required if your items have a border 
`;

实时示例：https://codesandbox.io/s/cold-leaf-6erlm

由JavaScript控制的动态flexbox布局

2 个答案: