Responsive Col don't support 'flex' prop in ColSize

[RplusSoundOn]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://codepen.io/rplussoundon/pen/ExgJZVb?editors=0010

Steps to reproduce

To resize between md and lg, the flex prop doesn't apply.

What is expected?

flex value should inject to the element inlin style when window size is larger than md.

What is actually happening?

flex value does't apply.

Environment	Info
antd	4.7.0
React	16.13.1
System	Mac
Browser	Chrome 87.0.4280.141

[RplusSoundOn]

ColSize should suppot flex prop

[bendrick92]

Bumping as I'm having the same issue. Setting the flex prop via a breakpoint param is not affecting the columns as expected.

<Col xs={12} md={{ flex: 'auto' }}>
...

I have confirmed other properties are behaving as expected:

<Col xs={12} md={{ push: 12 }}>
...

[gradddev]

Same issue. Not working as expected.

<Col xs={{ flex: "0 0 100%" }} sm={{ flex: "0 0 auto" }}></Col>

[bendrick92]

Bumping - any update on a fix?

[bendrick92]

Another bump...

[curly210102]

@afc163 有实现计划么？或许可以用 responsiveObserve 做动态设置？

[afc163]

@curly210102 有，可行。

[curly210102]

@afc163 那我上手改咯

[Tideus]

@afc163 Hello! When will it be released? => 33656

[evenmed]

I would love to see this released too. The docs make it seem like the expected behavior

xs|sm|md|lg|xl|xxl

Could be a span value or an object containing above props (e.g. "flex")

[shieldAgentJZ]

Having the same issue, has it been solved? Or is there any alternative way to implement responsive flex with the current version?

[naimeshbarot]

I am also facing the same issue. I am not able to apply flex for responsive.

[Daneng66]

Bump

[beltjun26]

Bump LOL

[DjVreditel]

Em... Bump ?

[CSDev0]

today i discovered this issue, some news about a fix on this?

[protetore]

Bump

[songyot11]

same

[aalvarezwindey]

Same issue

[aalvarezwindey]

Is maybe missing here https://github.com/ant-design/ant-design/blob/master/components/grid/col.tsx#L82 something like that?

    sizeClassObj = {
      ...sizeClassObj,
      [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
      [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
      [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
        sizeProps.offset || sizeProps.offset === 0,
      [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
      [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
      [`${prefixCls}-rtl`]: direction === 'rtl',

      // next line is missing
      [`${prefixCls}-${size}-flex-${sizeProps.flex}`]: sizeProps.flex || sizeProps.flex === '', // 
    };

[AlexisSniffer]

Is there a fix that was merged about this problem but in later versions this error still appears? Any solution or example of how this works? xs={{ flex: 'auto' }}

[extremecode0xFF]

fix doesn't work

[DjVreditel]

BUMP

[chungnq253]

BUMP!!!

[Tantalon]

@AlexisSniffer @afc163 the pull request https://github.com/ant-design/ant-design/pull/41962 added a flex prop to ColSize. However, there's no CSS for it in genLoopGridColumnsStyle, so the prop doesn't do anything when set.

Please can this be reopened?

This is a workaround to enable the flex keywords:

.ant-col-xs-flex-initial { flex: initial; }
.ant-col-xs-flex-auto { flex: auto; }
.ant-col-xs-flex-none { flex: none; }
@media (min-width: 576px) {
  .ant-col-sm-flex-initial { flex: initial; }
  .ant-col-sm-flex-auto { flex: auto; }
  .ant-col-sm-flex-none { flex: none; }
}
@media (min-width: 768px) {
  .ant-col-md-flex-initial { flex: initial; }
  .ant-col-md-flex-auto { flex: auto; }
  .ant-col-md-flex-none { flex: none; }
}
@media (min-width: 992px) {
  .ant-col-lg-flex-initial { flex: initial; }
  .ant-col-lg-flex-auto { flex: auto; }
  .ant-col-lg-flex-none { flex: none; }
}
@media (min-width: 1200px) {
  .ant-col-xl-flex-initial { flex: initial; }
  .ant-col-xl-flex-auto { flex: auto; }
  .ant-col-xl-flex-none { flex: none; }
}
@media (min-width: 1600px) {
  .ant-col-xxl-flex-initial { flex: initial; }
  .ant-col-xxl-flex-auto { flex: auto; }
  .ant-col-xxl-flex-none { flex: none; }
}

[AlexisSniffer]

It works for me in the following way

<Col flex={'auto'} xs={0} lg={24}>

where I add the property flex={'auto'} to auto adjust with the other elements xs={0} I don't want it to show up to lg size lg={24} so that it takes the total size that the flex would take: 'auto'

[yangfanzn]

这个问题在4.x的版本上也存在, 能否修复一下