我有一个用 Gatsby 版本 2 制作的页面，我想在 flexbox 容器内从 gatsby-image 制作组件。当我删除display: flex;属性时图像出现，当容器是 flex 容器时图像消失。
当我在开发工具中查看 Gatsby 应用的 CSS 样式时，我尝试将属性一一取消选择。当我取消选择position: absolute;属性时，图像会出现，但它的大小或放置不正确。
我还尝试flex-direction: column;在容器上进行设置，这使得两个图像中的第二个出现。但是，我更愿意将此值改为行。
overflow: visible !important;图像上的设置没有使图像出现。
import React from "react"
import { Link } from "gatsby"
import { css } from "@emotion/core"
import Img from "gatsby-image"
const testPage = props => (
<div
css={css`
display: flex;
flex-direction: // column or row;
`}
>
<Img
fluid={props.data.ImgOne.childImageSharp.fluid}
alt="description"
fadeIn={true}
style={{
...(props.style || {}),
maxWidth: "400px",
// position: "absolute", …我不知道 components 文件夹中的 image.js 文件是否应该接受参数，指定诸如流体与固定、图像大小、应该渲染哪个图像等，然后根据参数渲染任何图像。
如果不是，那么标准使用 image.js 是不是为要显示的每个图像基于 image.js 制作一个新文件？如果是这样，这样做有什么好处？
我阅读了有关 image.js 的内容，但我仍然不明白这个问题。
image.js 组件：https : //github.com/gatsbyjs/gatsby-starter-default/blob/master/src/components/image.js
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
/*
* This component is built using `gatsby-image` to automatically serve optimized
* images with lazy loading and reduced file sizes. The image is loaded using a
* `StaticQuery`, which allows us to load the image from directly within this
* component, rather than having to pass …我的控制台中收到了一堆警告，提示“未使用的 CSS 选择器”来自其他文件的 css 或已删除的 css。它可能与https://github.com/sveltejs/sapper/issues/842有关，但现在我只是在寻找一种方法来防止未使用的 css 选择器警告出现在控制台中。
我尝试在 _layout.svelte 和 template.html 文件的顶部编写注释，如下所示：<!-- svelte-ignore css-unused-selector -->如下所示：https: //svelte.dev/docs#Comments，但它不起作用。我可以仔细检查并将其添加到每个文件中，但我想知道是否有一种方法可以使其适用于所有文件。谢谢。