弹性布局怎么水平切分格子

在弹性布局中，可以使用flex布局实现水平切分格子的效果，具体的实现方法如下：

1. 首先，将父容器设置为flex布局，设置flex-wrap属性为wrap，这样可以让子元素自动换行。

2. 然后，将子元素的flex-basis属性设置为0，flex-grow属性设置为1，这样可以让子元素自动填充剩余的空间。

3. 最后，设置子元素的宽度，可以通过计算得到每个子元素的宽度，也可以通过设置百分比来实现。

举个例子，如果要将父容器水平切分成3个格子，可以按照以下步骤操作：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 0;
  flex-grow: 1;
  width: calc(33.33% - 10px); /* 计算每个子元素的宽度 */
  margin-right: 10px; /* 设置子元素之间的间距 */
}

以上代码中，通过设置每个子元素的宽度为33.33%（减去间距），实现了水平切分成3个格子的效果。