由 javascript 控制的动态 flexbox 布局答案

【问题标题】：dynamic flexbox layout controlled by javascript由 javascript 控制的动态 flexbox 布局
【发布时间】：2019-07-09 16:30:13
【问题描述】：

我想在一行中有 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% 不应应用于 num 1、4、7、10、13 等。我可以知道索引何时等于 1,4,7,10,13，但我怎么知道它在新行上？

【问题讨论】：

澄清一下：如果一个项目单独排成一行，您是否不希望它是全宽但只占用 1/3 的空间？
@trixn 是的.....

标签： css reactjs flexbox

【解决方案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 
`;

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

【讨论】：

那么我不能在框之间放置边距。
@Hanz 你没有在你的问题中指定应该应用边距的地方。您希望它们仅在项目之间还是在它们周围？
盒子之间。

【解决方案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% 空间。

【讨论】：

那么如何在项目之间留出空间呢？我没有固定宽度是有原因的。
您可以稍微减小宽度并添加边距。我正在用这些值更新我的答案。