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与表有很多共同之处。默认情况下，弹性项目排成一行（水平），除非您明确说明弹性项目应该换行，否则它们不会。你必须在这里做出决定：你想要元素垂直显示还是希望它们能够包装？如果你想要包装，那么可以支持它的浏览器数量减少到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;
}

应用box方向属性后，子元素忽略父级宽度

1 个答案: