alignment - CSS Flex: Flex项垂直拉伸,文本居中

  显示原文与译文双语对照的内容

关于 CSS flex,我有一个问题,我是一个网站开发人员,而不是CSS专家,我需要你对这个 CSS 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项目应该是垂直和水平居中的框。
  • 右侧的Flex项应该垂直对齐: 中心,水平:左。

感谢你的帮助,感谢你的帮助:)

时间:

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

我已经在橙色div中添加了flex容器,所以高度将是容器的高度

...