Question

我正在建立一个带有大介绍部分的静态页面，其中包含标题，标题和按钮。我希望标题和标题在水平方向上居中对齐，在垂直方向上居中对齐，但是按钮需要在容器底部水平居中对齐。

我在这里使用flexbox，父级是flexbox，其flex-direction设置为column，并且justify-content：center。然后，我为按钮设置了align-self：center，用于水平居中对齐。然后我给按钮设置了一个margin-top：auto，希望它可以移到父对象的底部，但是在这种情况下，它还将标题和标题推到了容器的顶部，这不是我想要的。请参见下面的代码。

.section__intro {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  &__button {
    align-self: center;
    margin-top: auto;
  }
}

<section class="section__intro">
  <div class="section__intro__title">
    This is
    <span class="section__intro__title--big">
      The Title of the page
    </span>
  </div>
  <a href="#" class=" section__intro__button">Join Us Now</a
      href="#">
  <button class="section__intro__scroll"></button>
</section>

我希望类section__intro__scroll的容器底部的按钮位于底部。另外，我不想为此使用position：absolute。

Answer 1

如果我正确理解，您正在尝试使用相同的标记进行类似的操作？

{
"nested": {
    "Account": {
        "fields": {
            "Height": {
                "type": "int64",
                "id": 1
            },
            "owner": {
                "type": "string",
                "id": 2
            },
            "Balances": {
                "repeated": true,
                "type": "AssetBalance",
                "id": 3
            }
        }
    },
    "AssetBalance": {
        "fields": {
            "Asset": {
                "type": "string",
                "id": 1
            },
            "Free": {
                "type": "int64",
                "id": 2
            },
            "Frozen": {
                "type": "int64",
                "id": 3
            },
            "Locked": {
                "type": "int64",
                "id": 4
            }
        }
    }
}

view in codepen

Answer 2

如注释中所述，无法使用当前的标记（实际上是可行的，如Yor's answer所示），将仅使用flexbox实现的一种方法拆分为问题一分为二。

您必须将项目分为两个框：第一个框用于标题和标题，第二个框用于按钮。使用这两个框，您可以将第一个框设置为增长，它将第二个框推到底部。

然后，您可以使用与现在使用的相同技术垂直放置第一个框的内容。

.section__intro {
  display: flex;
  flex-direction: column;

  /*
  Force to make it tall
  */
  height: 80vh;
}

.section__intro__title {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.section__intro__caption {
  display: block;
}

.section__intro__scroll {
  align-self: center;
  justify-self: end;
}

<section class="section__intro">
  <div class="section__intro__title">
    <span class="section__intro__title--big">
      The Title of the page
    </span>
    <a href="#" class=" section__intro__caption">Join Us Now</a>
  </div>

  <button class="section__intro__scroll">Button</button>
</section>

将单个子项与flex容器的底部对齐

2 个答案: