用于列的 Antd 响应式 Flex

Question

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

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

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

反应示例： 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

HTML

<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%，这样它就不会根据默认包装行为进行拆分。

所做的更改 -

HTML

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