CSS Flex：flex项目垂直拉伸和文本居中

我有一个与CSS flex有关的问题，我是一位web开发人员，但不是CSS专家，我需要您帮助解决这个CSS flex问题。CSS Flex：flex项目垂直拉伸和文本居中

这里是plnkr代码段，你可以看到我想要在这里：Plunker

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row; 
    justify-content: space-around; 
    align-items: center; 
    } 
    .flex-item { 
    background: #e6e6e6; 
    padding: 10px; 
    align-self: stretch; 
    }

我想的是：

所有Flex项目应该是舒展。
左侧的柔性物品应该既是盒子的垂直中心，也是水平中心。
右侧的Flex项目应垂直：中心，水平：左侧。

在此先感谢，感激你的帮助:)

来源

2014-11-03 Phat Tran

Flex和Flexbox的是两个不同的标签，我已经编辑了标签弯曲了flexbox – 2014-11-03 14:42:27

我已更新了<a href="http://plnkr.co/edit/JdsXLwJeOQirmjJhulFa?p=preview">Plunker[1]</a>Plunker。请检查并让我知道这是你需要的。

我已经加入柔性容器橙色DIV，从而使高度将容器

来源

2014-11-03 06:49:03 Swati

感谢您的帮助的高度，非常接近，但A +应该垂直和水平居中。我被困在这个阶段。谢谢！ – 2014-11-03 07:32:19

请找到更新的Plunker[2] – Swati 2014-11-03 09:13:17

哦谢谢我现在得到了答案:) – 2014-11-03 09:50:46

CSS Flex：flex项目垂直拉伸和文本居中

回答

相关问题