如何使 flex 中的项目更具响应性？答案

【问题标题】：How to make items within flex more responsive?如何使 flex 中的项目更具响应性？
【发布时间】：2020-03-21 12:32:09
【问题描述】：

我有一个标题布局，并且我已将项目放在 flex Row & Col 项目中。目前 Col 响应性并不完美，但我想更多地了解的是如何使 Col 内的元素更具响应性。是使用 div 的正确方法吗？

我希望它能够增长并始终位于 Col 内，但是当我将其缩小到不同的屏幕尺寸时，它会呈现在外部

        <Row>
          <Col
            xs={1}
            sm={2}
            md={3}
            lg={4}
            style={{ backgroundColor: "red" }}
          >
            <Avatar />
          </Col>
          <Col
            xs={4}
            sm={8}
            md={10}
            lg={12}
            style={{ backgroundColor: "blue" }}
          >
            <Avatar />
          </Col>
          <Col
            xs={2}
            sm={4}
            md={6}
            lg={8}
            style={{ backgroundColor: "green" }}
          >
            <div
              style={{
                justifyContent: "flex-end",
                display: "flex"
              }}
            >
              <div style={{ padding: "0 6px" }}>
                <Avatar />{" "}
              </div>
              <div style={{ padding: "0 6px" }}>
                <Avatar />{" "}
              </div>
              <div style={{ padding: "0 6px" }}>
                <Avatar />{" "}
              </div>
              <div style={{ padding: "0 6px" }}>
                <Avatar />{" "}
              </div>
            </div>
          </Col>
        </Row>
      </Header>

【问题讨论】：

标签： css responsive-design flexbox antd

【解决方案1】：

您需要调整 Avatar 组件的大小，可以使用em 或rem 单位对其进行定义。此外，将 div 声明为 flexbox 并没有太大的作用，除非您希望它能够自行包装。您还为xs 大小定义了较小的列宽，为lg 大小定义了更多列宽。这对我来说没有多大意义。尝试切换它（xs = {4} lg={2}）。

在定义了其他 flex 样式的情况下添加此属性，看看是否需要效果 flexWrap: 'wrap'

【讨论】：

我在哪里放置 flexWrap: wrap 属性？在 Col 或 div 内？
@Freddy。在div，以及justifyContentproperty