This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a81e977:

rebase

Codecov Report

Merging #21907 into master will not change coverage by %.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #21907   +/-   ##
=======================================
  Coverage   97.96%   97.96%           
=======================================
  Files         306      306           
  Lines        7039     7039           
  Branches     1927     1937   +10     
=======================================
  Hits         6896     6896           
  Misses        143      143           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 86cb767...a81e977. Read the comment docs.

只修改兼容包吧，这个样式已经来回调过好几次了。调回去又让 v4 的 Form 布局出问题。

#20216
#19983

之前 label 为啥又从 inline-flex 改成 inline-block

按照现在这个 flex 的标准迁移吧，以后有问题也往 flex 去靠，以前的 grid flex 模式就有问题，所以后来调的时候和 v3 很多的不兼容，现在这个我试了下应该是可以的

@zombieJ https://codesandbox.io/s/antd-reproduction-template-ix3h9 我整了个 Demo 试试

@zombieJ 这个让我先弄弄，我把规则整一整，不然以后还会出问题

我的意思是兼容包的样式就在 @ant-design/compatible 里针对 -legacy 样式调整，不要动 v4 的样式。v4 和兼容包应该是独立的。

我的意思是兼容包的样式就在 @ant-design/compatible 里针对 -legacy 样式调整，不要动 v4 的样式。v4 和兼容包应该是独立的。

嗯，兼容包的问题我会改，现在 V4 现在的也有问题，你看下这个

https://codesandbox.io/s/lingering-cloud-xdkmo

Demo，点击 col-4 会触发 aotu 区域的 click

Recording

对于 V3 Grid 的异常布局进行优化。

Grid 是基于 24 栅格（zha'ge）（Col span 属性）为基础，并使用媒体查询实现的响应式布局，在新的 V4 版本已经移除了旧版本默认的 Float 布局，全面替换成 Flexbox 布局

Grid

1. 默认情况下单个 Col 应该自动伸展独占一行
   

2. 多个 Col 应该平分空间伸展
   

3. 24 栅格的 Col 独占一行
   

4. Col 未占满 24 栅格的剩余空间可被默认 Col 占满
   

5. Col 超出 24 栅格多余的栅格换行排列
   

Form

Form 利用 Grid 排列 Label 和 Input 实现 horizontal vertical inline 布局基础

<Form>
  <Form.Item>
    <Row>
      <Col>Label</Col>
      <Col>Input</Col>
    </Row>
</Form>

1. horizontal（默认）Label 不自动伸展，Input 伸展占满剩余空间
   

2. vertical Label 和 Input 各自独占一行
   

3. inline 下应该表现为 流式布局
   

4. Media screen < 575px 下所有的布局表现为 vertical

什么时候修复上线

什么时候修复上线

@LJJCherry 每周会发布一个 patch，下周应该就能看到

@shaodahong @afc163 这个 PR 产生了 breaking change

v4.0.3 下栅格的表现

v4.0.2 下栅格的表现

从v4.0.2升级到 v4.0.3 样式错乱

如果，Form 的布局有问题，是不是应该在 Form 里复写 Grid 的样式，而不是直接修改 Grid 呢？

v4.0.3 下栅格的表现

v4.0.2 下栅格的表现

从v4.0.2升级到 v4.0.3 样式错乱

@kagawagao 4.0.2 的是 Bug，4.0.3 是对的，参考 #21907 (comment)

@shaodahong 这个改动对之前的代码影响很大的，我觉得不应该是一个 patch

从上面的 demo 中，也可以看到，这个影响到了布局，凡是之前是这样子使用的，都会产生影响。

我还是认为，在指定 span 的情况下，那么 Col 组件的 flex 属性应当被修改，在没有指定的情况下，那么 Col 的表现就应该同默认 display: flex 容器下的子组件表现一致

我还是认为，在指定 span 的情况下，那么 Col 组件的 flex 属性应当被修改，在没有指定的情况下，那么 Col 的表现就应该同默认 display: flex 容器下的子组件表现一致

嗯，默认 Flex 是不自动伸展的

对之前的代码影响很大我能问下哪些方面，如果只是单纯的没必要用上 Grid 吧

<Row>
  <Col><Button /></Col>
  <Col><Button /></Col>
</Row>

这只是个 demo，实际上使用的时候当然不是这个样子

我发现的影响的点目前就是 demo 中所体现的

晚上确认下

@afc163 @zombieJ 帮忙确认下

<Row>
    <Col>
      <Button>Button</Button>
    </Col>
    <Col>
      <Button>Button</Button>
    </Col>
</Row>

4.x

3.x Default

3.x Flex Type

准确说应该是 4.0.3 和 4.0.2 之间的区别

• 4.0.3
  

• 4.0.2
  

额。。。已经改了吗，我试了下，还这样？

@LJJCherry 提供下 Demo?

@LJJCherry 提供下 Demo?

https://codesandbox.io/s/antd-reproduction-template-8t7bl 嘻嘻嘻嘻~