为什么弹性容器包装弹性项目尽管超过 100%？

Question

我想制作一个 3 x 6 矩阵。 我使用了 flexbox，所有的 flexItem 的 flex-basis 都是 1/6。

在全屏时，它是我想要的。 但是，如果您将其设置为较小的屏幕，它就会开始换行。 我不想打破 3 x 6

https://codesandbox.io/s/vibrant-spence-gski65

import "./styles.css";
import React, { useState } from "react";

const gridValues = new Array(18).fill(0);

export default function App() {
  const [grid, setGrid] = useState<number[]>(gridValues);

  return (
    <div
      style={{
        width: "90%",
        height: "100%"
      }}
    >
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          padding: "16px"
        }}
      >
        {grid.map((num, i) => {
          return (
            <span
              key={i}
              style={{
                display: "flex",
                flexBasis: "16.666%",
                cursor: "pointer",
                justifyContent: "center",
                padding: "16px",
                border: "1px solid black",
                flexShrink: 0
              }}
            >
              <span style={{ opacity: 0 }}>{num}</span>
            </span>
          );
        })}
      </div>
    </div>
  );
}

Answer 1

https://codesandbox.io/s/vibrant-spence-gski65?file=/src/App.tsx

听完评论后最终改用 CSS 网格。 绝对容易得多

import "./styles.css";
import React, { useState } from "react";

const gridValues = new Array(18).fill(0);

export default function App() {
  const [grid, setGrid] = useState<number[]>(gridValues);

  return (
    <div
      style={{
        width: "90%",
        height: "100%"
      }}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr",
          gridTemplateRows: "1fr 1fr 1fr"
        }}
      >
        {grid.map((num, i) => {
          return (
            <span
              key={i}
              style={{
                display: "flex",
                cursor: "pointer",
                justifyContent: "center",
                padding: "16px",
                border: "1px solid black"
              }}
            >
              <span style={{ opacity: 0 }}>{num}</span>
            </span>
          );
        })}
      </div>
    </div>
  );
}