Antd 响应式 Flex 列

Question

我已经在我的 React 项目中实现了 antd，但有一件事我一生都无法弄清楚。我有一行 3 列，当屏幕尺寸缩小时，我想将 3 列折叠成一列。

每当我调整屏幕大小时，它们只是一次折叠一个而不是一次全部折叠。我能够使用 flex 在 vanilla html/css 中实现这一点，但由于某种原因，我无法使用 antd 获得相同的效果。我尝试添加媒体查询，但没有成功。

这是它开始崩溃时的样子，我还附上了我的代码笔以供参考。难道是我的列的弹性设置设置不正确？

反应示例： Codepen

CSS

@import 'antd/dist/antd.css';

.Red {background: red; color: white; width: 200px;}
.Green {background: green; color: white; width: 200px;}
.Blue {background: blue; color: white; width: 200px;}

@media screen and (max-width: 992px) {
  .column {
    flex: 10%;
  }
}

JS

const {  Row, Col, Divider  } = antd;

ReactDOM.render(
  <>
    <Row className="row">
      <Col flex="1 0 auto" className="column Red">Red</Col>
      <Col flex="1 0 auto" className="column Green">Green</Col>
      <Col flex="1 0 auto" className="column Blue">Blue</Col>
    </Row>
  </>,
  mountNode,
);

普通示例：（预期输出）：Codepen

超文本标记语言

<div class="row">
  <div class="column red">Red</div>
  <div class="column green">Green</div>
  <div class="column blue">Blue</div>
</div>

CSS

.red {background: red; color: white; width: 300px; float: left}
.green {background: green; color: white; width: 300px; float: left}
.blue {background: blue; color: white; width: 300px; float: left}

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 25%;
  padding: 20px;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
  }
}

Answer 1

设置为 auto 的 flex-basis 会使环绕行为先分成两列，然后再分成三列。因为它是行的宽度和列的高度等最小初始值设置。

您可以将 flex-basis 设置为 25%，这样它就不会根据默认的环绕行为进行分割。

所做的改变 -

超文本标记语言

const {  Row, Col, Divider  } = antd;

ReactDOM.render(
  <>
    <Row className="row">
      <Col flex="1 0 25%" className="column Red">Red</Col> <!-- From auto to 25%, same as below -->
      <Col flex="1 0 25%" className="column Green">Green</Col>
      <Col flex="1 0 25%" className="column Blue">Blue</Col>
    </Row>
  </>,
  mountNode,
);

CSS

@media screen and (max-width: 992px) {
  .column {
    flex: 100% !important; /* !important so that it overrides the inline style because by default it has higher priority */
  }
}

Codepen 演示： https://codepen.io/m4n0/pen/OJNrLqz