Question

我有一个用Gatsby版本2制作的页面，我想用flexbox容器中的gatsby-image制作组件。当我删除display: flex;属性时，图像会出现，而当容器是flex容器时，图像会消失。

当我在开发工具中查看Gatsby应用的CSS样式时，我尝试一次不选择属性。当我取消选择position: absolute;属性时，将显示图像，但其大小或放置不正确。

我还尝试在容器上设置flex-direction: column;，这使两个图像中的第二个出现了。但是，我希望此值改为row。

在图像上设置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",
        // overflow: "visible !important",
        ...props.data.ImgOne.childImageSharp.fluid.presentationWidth,
        margin: "0 auto", // Used to center the image
      }}
    />
    Some text to go in between pics.
    <Img
      fluid={props.data.ImgTwo.childImageSharp.fluid}
      alt="description"
      fadeIn={true}
    />
  </div>
)

export default testPage

export const pageQuery = graphql`
  query {
    ImgOne: file(relativePath: { eq: "ImageOne.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 400) {
          ...GatsbyImageSharpFluid_withWebp
          presentationWidth
        }
      }
    }

    ImgTwo: file(relativePath: { eq: "ImageTwo.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 800) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`

Answer 1

我遇到了同样的问题。原来是因为对Flexbox和Gatsby Image的工作原理缺乏了解。

您正在使用GatsbyImageSharpFluid。与“固定”相反，盖茨比图像的“流体”类型。您已经设置了最大宽度。但最终，“流体”的想法是图像将占据其容器的大小。最大宽度是它可以扩展的最大长度-仅在容器达到该宽度时达到。

在flexbox中，设置容器宽度的是内容宽度。这是flex的原理...但是流体图像没有宽度，因此您的flex容器也没有宽度=>您的图像也不会出现。

解决方案：为您的弹性项目设置固定宽度，或者改用固定的盖茨比图像。

有关固定与可变图像的信息，请参见Gatsby文档：https://www.gatsbyjs.org/docs/gatsby-image/

Answer 2

我的朋友建议我添加

& > * {
  flex-grow: 1;
}

这会将flex-grow应用于flex容器的直接子代。

我不清楚为什么图像消失了，但是可能与盖茨比添加的包装元素有关。

我想拥有flexbox的常规行为，我相信如果允许空间的话，图像和文本div会在同一行，但是我不得不弄乱添加max-width和min-width来获得我想要的行为。

当容器变成伸缩容器时图像消失

2 个答案: