ant-design: Responsive Col don't support 'flex' prop in ColSize

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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 27 (5 by maintainers)

Commits related to this issue

fix: grid col support responsive flex Closes #28961 — committed to curly210102/ant-design by curly210102 2 years ago
fix: grid col support responsive flex Closes #28961 — committed to curly210102/ant-design by curly210102 2 years ago
fix: Responsive Col don't support 'flex' prop in ColSize (#41962) Responsive Col don't support 'flex' prop in ColSize #28961 — committed to ant-design/ant-design by AlexisSniffer a year ago

Most upvoted comments

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

naimeshbarot on Aug 9, 2022

fix doesn’t work

extremecode0xFF on Apr 28, 2023

@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; }
}

Tantalon on Sep 10, 2023

@afc163 那我上手改咯

curly210102 on Jan 10, 2022