динамический макет flexbox, контролируемый JavaScript

Question

Я хочу иметь 3 столбца в строке, но не каждую новую строку, когда элемент в строке равен единице, я бы не хотел, чтобы этот элемент имел ширину 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% не следует применять при num 1,4,7,10,13 и так далее.Я могу знать, когда индекс равен 1,4,7,10,13, но как узнать, что он в новой строке?

Answer 1

Вы можете задать ширину ваших элементов 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 
`;

Live Пример: https://codesandbox.io/s/cold-leaf-6erlm

Answer 2

Попробуйте это -

const Flex = styled.div`
  display: flex;
  flex-wrap: wrap;
`;
const Item = styled.div`
  height: 30px;
  width: 28%;
  border: 1px solid black;
  margin: 10px;
`;

Если вы дадите фиксированную ширину вашему элементу, тогда он не займет 100% пространства новой строки.