html - 垂直对齐 flexbox

Question

flexbox (myflex) 中有三个按钮(按钮 1、按钮 2 和按钮 3)。

如何将这个 flexbox 放在屏幕底部并水平居中？

我可以将它居中，但不能将它放在屏幕底部并使其成为粘性页脚。

#myflex {
  display: flex;
  //position:fixed;
  bottom: 20px;
  justify-content: center;
  bottom: 10px;
}

<div id="myflex">
  <button class="button button1">button 1</button>
  <button class="button button2">button 2</button>
  <button class="button button3">button 33</button>
</div>

https://jsfiddle.net/fredericmarcel/7ssq32te/3/

Answer 1

为了垂直移动元素，容器必须有额外的高度。

与 block 元素默认填充 100% 的宽度不同，高度必须定义。否则，元素默认为 auto——内容的高度。

在您的代码中，没有指定高度，因此您的 flex 容器没有额外的对齐空间。例如，在 body 元素和您的容器周围设置边框:

body {
  border: 2px dashed red;
  padding: 1px;
}

#myflex {
  display: flex;
  bottom: 20px;
  justify-content: center;
  border: 1px solid red;
}

<div id="myflex">
  <button class="button button1">button 1</button>
  <button class="button button2">button 2</button>
  <button class="button button3">button 33</button>
</div>

解决高度问题后，您可以使用 flex 关键字属性或 auto margins使底部的 flex 容器居中对齐。

方法 1:Flex 关键字属性

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

<div id="myflex">
  <button class="button button1">button 1</button>
  <button class="button button2">button 2</button>
  <button class="button button3">button 33</button>
</div>

方法 2: flex 自动边距

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
}
#myflex {
  margin-top: auto;
}

<div id="myflex">
  <button class="button button1">button 1</button>
  <button class="button button2">button 2</button>
  <button class="button button3">button 33</button>
</div>

或者，如果您希望页脚固定在屏幕上，请尝试以下操作:

方法三:固定定位

body {
  height: 100vh;
  margin: 0;
}
#myflex {
  position: fixed;
  display: flex;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

<div id="myflex">
  <button class="button button1">button 1</button>
  <button class="button button2">button 2</button>
  <button class="button button3">button 33</button>
</div>

---