Question

我是初学者，我正在尝试将span元素与父元素底部对齐。为此，我在CSS下面使用了它，但是为什么它不起作用：

.sidebarBtn {
  position: absolute;
  top: 0;
  right: -50px;
  width: 50px;
  height: 500px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: beige;
  outline: none;
  cursor: pointer;
}

.sidebarBtn span {
  width: 35px;
  height: 3px;
  background-color: black;
}

<button class="sidebarBtn">
  <span></span>
</button>

Answer 1

使用一个列弹性框，并使用justify-content: flex-end将其对齐到底部-请参见以下演示：

.sidebarBtn {
  position: absolute;
  top: 0;
  right: 50px;
  width: 50px;
  height: 500px;
  border: none;
  display: flex;
  flex-direction: column; /* ADDED */
  justify-content: flex-end; /* CHANGED */
  align-items: center; /* CHANGED */
  background-color: beige;
  outline: none;
  cursor: pointer;
}

.sidebarBtn span {
  width: 35px;
  height: 3px;
  background-color: black;
}

<button class="sidebarBtn"><span></span></button>

但是您会认为为什么在这种情况下对于div而不是button元素来说可以正常工作的原因，代码无法正常工作-这是因为button或fieldset元素未设计为 flex容器。按住flexbox 按钮，看看一切正常：

.sidebarBtn {
  background-color: beige;
  outline: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 50px;
  width: 50px;
  height: 500px;
}

.sidebarBtn>span {
  border: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}

.sidebarBtn>span>span {
  width: 35px;
  height: 3px;
  background-color: black;
}

<button class="sidebarBtn">
  <span>
    <span></span>
  </span>
</button>

Answer 2

我认为button不能是flex容器，只能是flex元素。

此代码应该可以工作，但是我不确定这是否是最好的方法。它可以在Chrome上运行，您可能需要在其他浏览器上进行尝试。

.sidebarBtn {
  width: 50px;
  height: 500px;
  border: none;
  background-color: beige;
  cursor: pointer;
}

.sidebarBtnContent {
  width:100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sidebarBtnContent span {
  width: 35px;
  height: 3px;
  background-color: black;
}

<button class="sidebarBtn">
  <span class="sidebarBtnContent">
    <span></span>
  </span>
</button>

如何使用弹性盒将元素在中心底部对齐

2 个答案: