css - adobe xd 插件中的 Flexbox 布局问题

Question

在 adobe xd 中，当我使用flex-wrap子元素相互重叠时

示例 代码：

 <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          height: 400,
          width: 600,
          border: "solid 1px #ddd",
          overflow: "scroll"
        }}
      >
        {this.state.images.map(({ png, description }, i) => (
          <img
            style={{
              border: "solid 1px #ddd",
              padding: 7,
              margin: 4,
              borderRadius: 4,
              display: "flex",
              flexDirection: "column"
            }}
            alt={description}
            src={png}
            key={i}
            height={64}
            width={64}
          />
        ))}
      </div>

但如果我使用较小的图像尺寸，它不会重叠

示例 代码

  <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          height: 400,
          width: 600,
          border: "solid 1px #ddd",
          overflow: "scroll"
        }}
      >
        {this.state.images.map(({ png, description }, i) => (
          <img
            style={{
              border: "solid 1px #ddd",
              padding: 7,
              margin: 4,
              borderRadius: 4,
              display: "flex",
              flexDirection: "column"
            }}
            alt={description}
            src={png}
            key={i}
            height={34}
            width={34}
          />
        ))}
      </div>

我无法在浏览器中重现此错误，看起来它仅在 adobe xd 插件中

标签： cssflexboxadobe-xd

Answer 1

这是当前 XD 版本中的一个已知错误。感谢您报告它。我们会在未来的 XD 更新（可能是 XD 20 或 21）中为您提供修复。敬请期待！