使用 flexbox 垂直对齐内容答案

【问题标题】：Align content vertically with flexbox使用 flexbox 垂直对齐内容
【发布时间】：2019-05-13 22:57:15
【问题描述】：

我正在创建一个图块，其中图像可以是图块的 50% 或 75%，并且内容将填充剩余的区域/剩余空间。我的问题是我不想为图像设置特定的高度，因为它会失去它的图像/纵横比。我有以下类似的内容：

const tile= () => (
  <StyledWrapper>
    <StyledImageBlock>
      //get Image here
    </StyledImageBlock>
      <StyledTextContent>
        {getTitleOne()} //this is a span element
        {getTitleTwo()} //this is a span element
      </StyledTextContent>}
  </StyledWrapper>
);

在我的StyledWrapper 我有以下内容：

  text-align: center;

  a {
    text-decoration: none;
  }

在我的StyledImageBlock 我有以下内容：

  width: 100%;

在我的StyledTextContent 我有以下内容：

align-content: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;

但是项目拒绝垂直对齐，我将StyledWrapper 的高度设置为height: 700px 只是为了演示，但仍然拒绝。我在哪里错了？关于如何实现我所描述的任何建议。

更多信息。在图像和内容上设置百分比高度时，我可以达到所需的结果，但是这样图像纵横比会变得更糟/拉伸我不想要的图像。最终，这个 tile 将进入一个 flexbox 网格。

【问题讨论】：

如果您以 minimal reproducible example 的形式发布生成的 HTML 和 CSS 来重现您的问题，那就太好了。

标签： javascript css reactjs flexbox styled-components

【解决方案1】：

你可能需要放

justify-content: center;
align-items: center;

关于StyledWrapper。这将使 StyledImageBlock 垂直和水平居中。

【讨论】：

这工作但也对齐图像，我需要图像保持在磁贴的顶部，下面的任何内容都居中，我遇到的问题是内容和图像必须指定高度，我希望它占据网格中可用高度的 100%（目前是这样），只是不能在剩余空间中居中文本而不设置高度

【解决方案2】：

在<StyledWrapper> 集合中。

justify-content: center; 以 x 轴为中心，并且，

align-items: center; 居中。

定义display: flex时的父元素是一个框，您可以在其中设置子元素的交互方式。

flex-basis（设置第一个元素的宽度，影响定义的元素）

flex-direction（设置元素的显示方向，在子弹性盒的父类中使用）

flex-grow（元素在x轴上的宽度，影响定义的元素）

flex-flow（如何在 x 轴上显示子代，用于子代弹性盒的父类）

flex-shrink（缩小多少宽度，影响定义的元素）

flex-wrap（强制为一行或可以换行为多行，用于子弹性盒的父类）

【讨论】：