css - 对齐元素 :center not working in custom CSS?

Question

由于某些原因，align-items 在我的自定义 CSS 中不起作用。有什么建议可以解决这个问题吗？

问题图片:

这是代码:

.list-view {
    display:flex;
}
.item-image {
    display:flex;
    align-items:center;
}

我猜第二部分是问题所在。 align-items 在我的 WordPress 自定义 CSS 中是白色的，而 display 等其他属性是海军蓝色的，所以我猜它无法读取这个属性，但是我不确定这是为什么。

Answer 1

工作jsFiddle ，我已将 flex: 1; 添加到 item-image 类中。

.list-view {
  border: 1px solid black;
  display: -webkit-flex;
  /* Safari */
  -webkit-align-items: center;
  /* Safari 7.0+ */
  display: flex;
  text-align: center;
}

.item-image {
  align-items: center;
  flex: 1;
  -webkit-flex: 1;
  /* Safari 6.1+ */
}

<div class="list-view">
  <div class="item-image" style="background-color:coral;">RED</div>
  <div class="item-image" style="background-color:lightblue;">BLUE</div>
  <div class="item-image" style="background-color:lightgreen;">Green div with more content.</div>
</div>

希望对您有所帮助。 :)