垂直元素列表,其中每行缩小其宽度以匹配内部内容

Question

我想创建一个垂直列表,其中每行缩小其宽度以完美地包含其内部内容(相对于div扩展其宽度以填充容器的默认行为).

我想每行只有一个 HTML元素(没有额外的包装div).

下面的代码完全符合我的要求,但它在Safari中不起作用(bug？).

.container {
  margin: 10px;
  border: 2px solid #999;
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 300px
}
.row-item {
  padding: 5px;
  margin: 5px;
  border: 1px solid green;
  /* this will shrink the width to the inner content
        in Chrome and Firefox, but not in Safari */
  margin-right: auto;
}

<div class='container'>
  <div class='row-item'>Item #1</div>
  <div class='row-item'>Another Item...</div>
  <div class='row-item'>Item No. 3</div>
</div>

这是一个带有上述代码的codepen:http://codepen.io/anon/pen/woKYqx

我知道通过添加包装div然后display: inline-block在内部元素(或其他几个类似的解决方案)上使用来解决这个问题是微不足道的.

但是,似乎应该可以在不添加额外HTML元素的情况下解决此问题.这是一个相当简单的布局.

是否有跨浏览器方式来为每行使用一个HTML元素？

Answer 1

您正在使用margin-right: auto将元素一直推到左侧,这也会强制项目获取其内容的宽度.

这是一个很好的方法,但是,正如您所指出的,它在Safari中失败了.

一个简单的替代方法是align-self: flex-start在flex项目上使用:

.row-item {
  padding: 5px;
  margin: 5px;
  border: 1px solid green;
  align-self: flex-start;  /* NEW */
  /* margin-right: auto;  (can be kept or removed) */
}

或者,只需align-items: flex-start在flex容器上使用.

.container {
  margin: 10px;
  border: 2px solid #999;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* NEW */
  width: 300px
}