如何垂直对齐其中一个柔性elemet孩子

我有3个垂直居中的div在一个柔性容器与flex-direction:column和我需要将第三个div放在容器的底部。如何垂直对齐其中一个柔性elemet孩子

这是我想要的东西解释：https://jsfiddle.net/tom8p7be/

我怎样才能使这个？谢谢。

2017-04-19 Byteshifter

你想在2成居中的人在可用空间的方面为中心，到最后的股利或他们的父母？ – LGSon

您可以在第一个和最后一个子div上添加margin-top: auto。当您将margin-top: auto添加到last-child div时，它会将该div推到父代的结尾，但它也会将其他两个div推到父代的顶端。这就是为什么你还需要将margin-top: auto添加到第一个孩子的div，并且这将把他们放置在从顶部到最后一个孩子div的空间中心。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 100vh; 
 
} 
 
.container div { 
 
    margin: 5px; 
 
    padding: 5px 10px; 
 
    border: 1px solid; 
 
} 
 
.container > div:last-child, 
 
.container > div:first-child{ 
 
    margin-top: auto; 
 
}

<div class="container"> 
 
    <div>This div should be vertically centered</div> 
 
    <div>This one too</div> 
 
    <div>And this div shoud be placed at the bottom of the flex container</div> 
 
</div>

来源

2017-04-19 11:55:13

谢谢！这个对我有用。 – Byteshifter

如何垂直对齐其中一个柔性elemet孩子

回答

相关问题