垂直对齐一个flexbox [英] Vertically align a flexbox

问题描述

在flexbox（ myflex ）中有三个按钮（按钮1，按钮2和按钮3）。

我怎样才能把这个flexbox放在屏幕的底部，然后水平居中呢？

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

#myflex {display：flex; //位置是：固定;底部：20px; justify-content：center;底部：10px;}

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

$ b

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

解决方案

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

与宽度不同，哪些块元素默认填充100％，高度必须定义。否则，元素默认为 auto –内容的高度。

在你的代码中，没有指定高度，所以你的flex容器没有额外的空间来对齐。例如，在 body 元素和您的容器周围设置边框：
$ b

body {border：2px dashed red; padding：1px;}＃myflex {display：flex;底部：20px; justify-content：center; border：1px solid red;}

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


$ b

解决高度问题后，您可以使用flex关键字属性或 auto 页边空白处将中间对齐位于底部的弹性容器。



方法1：Flex关键字属性



body {height：100vh;保证金：0;显示：flex; justify-content：center; align-items：flex-end;}

< div ID = myflex > < button class =button button1>按钮1< / button> < button class =button button2>按钮2< / button> < button class =button button3> button 33< / button>< / div>


$ b

方法2：自动调整边距



  body {height：100vh;保证金：0;显示：flex;理由内容：中心;}＃myflex {margin-top：auto;}  

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

$ b

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

方法3：固定定位
$ b

body {height：100vh ; margin：0;}＃myflex {position：fixed;显示：flex;底部：20px;剩下：50％; transform：translateX（-50％）;}

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

$ b

---

There are three buttons (button 1, button 2 and button 3) in a flexbox (myflex).

How can I put this flexbox at the bottom of the screen and center it horizontally?

I can center it, but not put it at the bottom of the screen and make it a sticky footer.

#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/

解决方案

In order to move an element vertically, the container must have extra height.

Unlike width, which block elements fill 100% by default, heights must be defined. Otherwise, elements default to auto – the height of the content.

In your code, there is no height specified, so your flex container has no extra space for alignment. For an illustration, set borders around the body element and your container:

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>

Once you have the height issue resolved, you can use flex keyword properties or auto margins to center-align the flex container at the bottom.

Method 1: Flex Keyword Properties

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>

Method 2: Flex Auto Margins

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>

OR, if you want the footer to remain fixed on the screen, try this:

Method 3: Fixed Positioning

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>

---

这篇关于垂直对齐一个flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！