在使用justify-content:stretch;
时,我试图将flexbox项目的内容居中。在这种情况下,使用display:table-cell;vertical-align:middle;
的老把戏似乎行不通。什么能做到?
.flex-container {
display:flex;
align-items:center;
justify-content:stretch;
}
.flex-item {
align-self:stretch;
}
<div class="flex-container">
<div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>
在你回答之前:对于我的问题似乎有很多困惑。我正在尝试将flex-item的内容居中。使用justify-content:stretch
,项目的高度将拉伸到容器的整个高度,但项目的内容会浮动到顶部(至少在Chrome中是这样)。
“一张图片胜过千言万语。”(A)是我已经得到的。(B)是我想要的。
发布于 2015-02-01 02:14:44
它可以通过将每个flex项作为flex
容器进行display
,然后通过align-items
属性垂直对齐内容来实现,如下所示:
.flex-container {
display:flex;
align-items:center;
height: 200px; /* for demo */
}
.flex-item {
align-self:stretch;
display:flex;
align-items:center;
background-color: gold; /* for demo */
}
<div class="flex-container">
<div class="flex-item">
I want to be vertically centered!
<s>But I'm not.</s>
</div>
</div>
注意,如果省略了.flex-container
的align-items:center;
声明,也可以安全地从flex项中删除align-self:stretch;
。
发布于 2015-02-01 02:16:22
我不确定我是否正确地解释了您的请求,但我认为您正在尝试使用"justify-content:stretch;“,而您应该使用flex-grow。
在我的示例中,我使用了flex :1auto;它只是设置几个flex属性的简写。
HTML:
<div class="flex-container">
<div class="flex-item">I'm top dog!
</div>
<div class="flex-item flex-center">
I want to be vertically centered! And I am!
</div>
</div>
CSS:
*{
box-sizing:border-box;
padding:5px;
}
.flex-container {
border: 1px solid;
display:flex;
align-items:center;
height: 100px;
}
.flex-item {
flex: 1 auto;
border: 1px solid green;
height:100%;
display:flex;
justify-content:center;
}
.flex-center {
align-items: center;
}
Flex属性:
https://stackoverflow.com/questions/28254332
复制相似问题