使用flexbox垂直对齐div

我正在尝试使用flexbox垂直对齐三个div块。使用flexbox垂直对齐div

我可以让它们水平对齐，但不是垂直。

我在做什么错？

.banner { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: #01b9d5; 
 
    color: white; 
 
    height: 55px; 
 
} 
 
.banner-align { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px solid green; 
 
} 
 
.banner-hero { 
 
    flex: 1; 
 
    align-self: center; 
 
    max-width: 50%; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
.banner-left { 
 
    align-self: flex-start; 
 
    flex: 1; 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
} 
 
.banner-right { 
 
    align-self: flex-end; 
 
    flex: 1; 
 
    text-align: right; 
 
    border: 1px solid yellow; 
 
    display: inline-block; 
 
}

<div class="banner"> 
 
    <div class="container banner-align"> 
 
    <div class="banner-left"> 
 
     Left Block 
 
    </div> 
 
    <div class="banner-hero"> 
 
     <b>Title</b> 
 
    </div> 
 
    <div class="banner-right"> 
 
     Right block 
 
    </div> 
 
    </div> 
 
</div>

这里是一个小提琴：https://jsfiddle.net/zqc1qfk1/1/

来源

2016-09-30 Michael Vayvala

这是因为带有'.banner-align'风格的容器只与他的物品一样高并且坚持到顶部。举例来说，“身高：100％”，他的物品将与自己的自我属性对齐。 – michaPau

你的意思是这样的：[JSFiddle]（https://jsfiddle.net/zqc1qfk1/4/） –

@Hunter Turner，michaPau是的，这很容易。非常简单的错误。感谢您指出。 –

简单地使容器wrap，并给每个柔性项width: 100%：

.banner-align { 
    display: flex; 
    flex-wrap: wrap; 
} 

.banner-align > * { 
    flex: 0 0 100%; 
}

现在每个柔性项目占用了所有空间的行中，迫使其他元素，创造新行。

revised fiddle

来源

2016-09-30 15:19:37

你缺少柔性的flex-direction:column属性。

默认情况下，任何柔性容器都有一个flex-direction: row &这就是它不水平移动&的原因。您需要明确指定。

Here is more about it

.banner-align { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border:1px solid green; 
    flex-direction: column; 
}

更新了Fiddle。

来源

2016-09-30 15:19:14

我认为他正在尝试使所有垂直居中的项目排成一行，而不是创建一列 –

align-items: center上你的Flex父垂直中心的一切。但是，对孩子使用align-self: [anything but center]将覆盖此。

编辑：

哎呀，因为别人指出的那样，你没有得到原小提琴的align-self影响，因为父母的身高没有设置，所以它是唯一的，因为它需要的是一样高遏制孩子。如果孩子们的身高不一样，你会看到他们交错。

如果您试图让它们都居中，您可以摆脱align-self属性，并让父母上的那个align-items: center执行此操作。如果你想让他们交错，你不需要父母上的那一个align-items: center。

来源

2016-09-30 15:19:46

使用flexbox垂直对齐div

回答

相关问题