html - 应用 box-direction 属性后，子元素会忽略父元素的宽度

Question

相当简单的问题，但我似乎无法找到解决这个简单问题的方法。 我有一个由于特定原因需要反转的元素列表，这只需要使用 CSS 来完成，因为后端会生成一个普通列表。

box-direction 属性完美地做到了这一点，只有在应用它之后，子元素完全忽略父元素的宽度并彼此相邻显示，溢出到父框之外。

我该如何解决这个问题？

<div>
     <p>Cat</p>
     <p>Dog</p>
     <p>Horse</p>
</div>

div {
     width:50px;
     height:100px;
     background-color: red;
     display:-moz-box;
     -moz-box-direction:reverse;
     display:-webkit-box;
     -webkit-box-direction: reverse;
     display:box;
     box-direction:reverse;
 }

p {
     width: 50px;
}

示例: http://jsfiddle.net/KEYqm/2/

Answer 1

这里发生了很多事情。

首先，如果没有现代属性的配合，就永远不应该使用旧 Flexbox 模块中的属性。旧的规范不完整，尤其是 Firefox 的实现非常差。

其次，Flexbox 与表格有很多共同点。默认情况下， flex 元素排成一行(水平)，除非您明确表示 flex 元素应该换行，否则它们不会换行。您必须在这里做出决定:您希望元素垂直显示还是希望它们能够换行？如果你想要换行，那么可以支持它的浏览器数量减少到3个:Chrome、Opera、IE10。

假设您希望它们垂直显示，这些是您需要的属性:

http://codepen.io/cimmanon/pen/vomEI

div {
  width: 50px;
  height: 100px;
  background-color: red;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}